• O stronie
  • Projekty
    • CodeIgniter IMG
    • CodeIgniter minify
    • Simple FAQ
  • Narzędzia
    • GeoIP
    • konwerter WebP
    • Tools
    • Sprawdź szybkość strony
  • Linkownia
  • Kontakt
blog web developera

blog web developera

  • O stronie
  • Projekty
    • CodeIgniter IMG
    • CodeIgniter minify
    • Simple FAQ
  • Narzędzia
    • GeoIP
    • konwerter WebP
    • Tools
    • Sprawdź szybkość strony
  • Linkownia
  • Kontakt

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.

07/01/2019 JavaScript Przydatne
No Comments
htmlJavaScript

Optymalizacja obrazków i wycinanie tła

Rozpoznawanie SPAMu przez API

Dodaj komentarz Anuluj pisanie odpowiedzi

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.

Szukaj

Kategorie

  • Ogólnie
    • Humor
    • Pamiętnik malkontenta
  • Programowanie
    • CodeIgniter
    • CSS
    • GoLang
    • JavaScript
    • PHP
  • Przydatne
    • CMS
    • Przedruki
  • Sprzęt
    • Mac
    • Serwery

Reklamy





Digital Ocean

Popularne wpisy

  • Lista publicznych API
  • HP LaserJet 1018 i Mac OS X
  • Dowcipy o Francuzach
  • Jak używać SCP
  • pfSense kilka smutnych wniosków
  • Szybki podgląd PSD, AI i EPS
  • Centralka VoIP czyli Asterisk i FreePBX
  • Tworzenie map obrazów
  • Logowanie bez hasła przez PuTTy
  • Jak sprawdzić prędkość WiFi na Mac
Dumnie wspierane przez WordPressa | Motyw: Neblue by NEThemes.