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.