
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:
Popcorn.js
Dla szukających czegoś mocniejszego – Popcorn.js. Jest to The HTML5 Media Framework dostarczony przez Mozillę:
Video.js
To kolejny player video, wspominany już w jednym z wcześniejszych artykułów:
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