Ciekawy przypadek tagu video
Dawno, dawno temu – kiedy jeszcze nie było neostrady… żeby odpalić video w na stronie, trzeba było mieć flash i kupę dodatkowych skryptów. Po tym jak pojawił się HTML5 sprawa się lekko uprościła i wystarczył tag VIDEO i mądre przeglądarki w teorii zaczęły odtwarzać video bez flasha.
Teoretycznie ten kod rozwiązuje nam sprawę. Jeśli przeglądarka obsługuje webm (czyli Chrome, Opera i podobne) to gramy zoptymalizowany format webm, wszystkie inne powinny poradzić sobie z mp4
<video width="960" height="720" controls id="video"> <source src="video.mp4" id="mp4" type="video/mp4"> <source src="video.webm" id="webm" type="video/webm"> Your browser does not support the video tag. </video>
Niestety ku naszemu zaskoczeniu w inspektorze pokaże nam się że przeglądarka na silniku Chromium i tak odpali .mp4 pomimo tego, że webm jest “lepszym” dla niej formatem.
Dlaczego? Bo mp4 jest podane jako pierwsze, więc najpierw zostanie rozpoznane jako “grywalny” format i odtworzone. Tyle w kwestii optymalizacji. Poprawny kod poniżej:
<video width="960" height="720" controls id="video"> <source src="video.webm" id="webm" type="video/webm"> <source src="video.mp4" id="mp4" type="video/mp4"> Your browser does not support the video tag. </video>
Druga ciekawa sprawa pojawia się, jak chcemy manipulować zawartością tagów z poziomu JavaScript:
var video = document.getElementById('video'); // replace value in src tag var webmSrc = document.getElementById('webm'); webmSrc.setAttribute('src','video.webm'); // load and play video video.load(); video.play();
Rozwiązanie nie zadziała bez magicznego “video.load()” – pomimo tego, że video.play() odtworzy video w pierwszej kolejności.
- Warto sprawdzić w inspektorze, czy nasz kod faktycznie robi to co powinien (odtwarza “optymalny format”)
- Przeglądarki są głupie i wygodne – to po naszej stronie powinna leżeć kwestia optymalizacji rozwiązania.