HTML/CSS Video einbinden, CPU Last

SimonK91 · 9. April 2018

Hallo Forum,

ich baue zur Zeit eine Webseite und würde gerne im Header-Bereich ein kleines Video als Hintergrund laufen lassen.

Die Einbindung mittels <video src="demofilm.mp4" > </video> funktioniert an sich, allerdings habe ich zwei Probleme:

Trotz einer Dateigröße von nur ca 4-5 MB, ruckelt das Video stark und erzeugt recht hohe CPU Last im Browser bei einem i5 Laptop. (Firefox). In Chrome spielt es sich trotz Autoplay Funktion (<video controls autoplay>) garnicht erst ab, ich sehe aber den ersten Frame als "Vorschau".

Der Film ist in mp4 encodiert. Was mache ich falsch bzw. wie lässt sich das Problem optimieren?

Danke

timse201 · 9. April 2018

Standard beachten

und vor demofilm.mp4 sollte ein /

https://www.w3schools.com/html/html5_video.asp

Cool Master · 9. April 2018

Bitrate runter drehen. Ich würde aber davon abraten Videos so einzubinden und vor allem per autoplay versuchen zu starten. Das blocken im Prinzip fast alle Browser weil es einfach nur nervig ist.

Nimm lieber ein schönes Bild als Hintergrund und leg es im <body> ab.

Edit:

Wenn es lokal bzw. im gleichen Ordner ist geht es auch ohne "/" im Pfad.

SimonK91 · 9. April 2018

Ja ob mit oder ohne dem slash sollte nicht das Problem sein, das Video wird ja gefunden...
Es ist ein sehr dezentes Video welches sich nicht zu sehr aufdrängt, noch dazu ist es lautlos, daher sollte es durchaus als Autoplay eingebunden werden.

Du denkst also dass Chrome das autoplay blockiert? Hatte nur mal gelesen, dass Chrome blockiert, falls es nicht muted ist. In dem Falle wäre es in der Tat super nervig...

timse201 · 9. April 2018

da er es im header ablegt wird es auf Unterseiten Probleme geben

derlorenz · 9. April 2018

Vllt kannst ja auch das WebM Format nutzen. Leider Spielt Safari da nicht mit.
https://www.webmproject.org/users/#supported_web_browsers

Ansonsten ist die "compression" entscheidend. Hier musst du mal etwas spielen, damit die Qualität nicht leidet.

Cool Master · 9. April 2018

WebM ist tot. Mittlerweile kann jeder Browser mp4 also warum nicht nutzen.

Wie gesagt die CPU last kommt einfach von einer zu hohen Bitrate und evtl. zu hoher Auflösung. Ich würde hier also auf die Auflösung des Headers gehen und das Video auch nur in dieser Auflösung anbieten.

Ja ich gehe aktuell davon aus, dass Chrome den autoplay blockt. Ob es muted ist oder nicht spielt glaube ich keine Rolle aber das kann ich nicht zu 100% sagen da ich Vivaldi nutze.

SimonK91 · 11. April 2018

Danke für die Inputs. Ich dachte eigentlich, dass ich mit dem mp4 Format und der Bitrate siehe Screenshot recht resourcenschonend unterwegs wäre. Auf meinem i7-4600U CPU habe ich allerdings in Firefox ca 40% CPU Last. Lässt sich das nicht weiter optimieren, oder habe ich eine grundsätzlich unoptimierte Implementierung, wenn ich es per <video> tag einbinde.

Ein YouTube embedded iFrame wollte ich eigentlich vermeiden...

Vielleicht hat noch jemand eine Idee warum es in Chrome nicht abgespielt wird, weiß da jemand etwas genaueres?

Cool Master · 11. April 2018

Du könntest noch probieren auf 24 Bilder/Sekunde zu gehen des Weiteren ist 1 Min sehr lange! Wenn man ein Video als Background nutzt sollte es nur wenige Sekunden lang sein und es sollte loopen. Wenn das nicht geht ist das Video nicht das korrekte Medium für die Stelle evtl. wäre ein .gif die bessere Lösung?

Schau dir mal die Seite unter "Where To Find Videos For Your Website" an:

https://www.websitebuilderexpert.com/video-background-for-websites/

Da gibt es auch einige Links für Stock Videos welche man nutzen kann.

Piktogramm · 11. April 2018

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Als ob mit dem Benutzen von Google nicht herauszubekommen wäre wieso, weshalb und wie mit dem Standardverhalten eines Google Produktes umgegangen werden sollte -.-.

Ob beim Firefox Videobeschleunigung überhaupt zur Verfügung steht findest du mit about:support heraus.
Ansonsten schau dir halt an, was die Performanceanalyse der Dev Tools vom FF dazu sagt. Prinzipiell würde ich aber vermuten, dass das Rendern eines Videos über dem (halb) transparente Objekte liegen schlicht Rechenleistung frisst.

Zu guter letzt, Betreiber von Seiten mit bunten Zappelinhalten auf Autoplay die sinnlos teuren Mobiltraffic verschwenden sollte der Blitz treffen. UND der Adblock Bannhammer

Suche

HTML/CSS Video einbinden, CPU Last

SimonK91

Lieutenant

timse201

Ensign

Cool Master

Fleet Admiral

SimonK91

Lieutenant

timse201

Ensign

derlorenz

Commander Pro

Cool Master

Fleet Admiral

SimonK91

Lieutenant

Cool Master

Fleet Admiral

Piktogramm

Admiral