HTML/CSS Video einbinden, CPU Last

SimonK91

Lieutenant
Registriert
März 2012
Beiträge
893
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
 
Zuletzt bearbeitet:
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.
 
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...
 
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.
 
videobitrate.png

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?
 
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.
 
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
 
Zurück
Oben