Po artykule o Audio, pora napisać o odtwarzaniu filmów poprzez HTML5 Video.

Praca z HTML5 Video

Element <video> specyfikacji HTML5 pozwala na odtwarzanie filmów video w przeglądarce, bez instalowania dodatkowych wtyczek.

Przykład użycia:

<video controls>
 <source src="video.webm" type="video/webm">
 <source src="video.ogv" type="video/ogg">
 <source src="video.mp4" type="video/mp4">
 No video support.
</video>

Tak samo jak w przypadku elementu audio, możemy dodać atrybut controls, aby wyświetlić podstawowe elementy UI służące do kontroli na odtwarzaniem video.

Po szczegóły dotyczące parametrów i inne podstawowe informacje warto udać się na W3Schools:

http://www.w3schools.com/tags/tag_video.asp

oraz

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

Rozważmy jeszcze jeden przykład, w którym video jest odtwarzane tylko po najechaniu na nie kursorem myszy:

<video id="vid" onmouseover="this.play()" onmouseout="this.pause()" 
  autobuffer="true" width="400px" height="300px">
  <source src="my.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <source src="my.mp4" type='video/mp4; codecs="mp4a.40.2"'>
</video>

Dla elementów source określiliśmy także atrybuty type oraz codes.

Gotowe rozwiązania

Nie brakuje dobrych rozwiązań, dla których podwaliną jest HTML5 Video oraz JavaScript. A skoro tak, to dlaczego by z nich nie skorzystać?

JW Player

Odtwarzaczem, z którym przyjemnie się pracowało jest z pewnością JW Player. Niestety darmowa wersja tylko do użytku niekomercyjnego, plus płatne plany.

Strona WWW:

http://www.jwplayer.com/

Popcorn.js

Dla szukających czegoś mocniejszego – Popcorn.js. Jest to The HTML5 Media Framework dostarczony przez Mozillę:

http://popcornjs.org/

Video.js

To kolejny player video, wspominany już w jednym z wcześniejszych artykułów:

http://www.videojs.com/

Zasoby

Na zakończenie dodatkowe zasoby powiązane tematycznie:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

http://www.smashingmagazine.com/2011/03/11/syncing-content-with-html5-video/

Podsumowanie

Dawniej umożliwienie odtworzenia filmów video na stronie WWW możliwie jak największej liczbie użytkowników było zadaniem dość skomplikowanym. Dziś kilka zdań, kilka linijek kodu i linków wystarczy, aby w skrócie omówić znakomite możliwości i ułatwienia oferowane przez HTML5 oraz biblioteki.

Programista może szybko uzyskać pożądany efekt bez zbytniego wdawania się w szczegóły i programowania „dziwnych sztuczek”, aby wszystko dobrze działało.

thank_you.avi

Dominik Wlazłowski

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem. Bloger 🙂 Anty-lewak 🙂 Pasjonat programowania, nowych technologii, a także sportu i motoryzacji.

     

Podaj dalej: 10101