Wideo dla każdego: jak pogodzić tag video (z HTML 5) i Flasha?

Najnowsze wersje przeglądarek Firefox (3.5), Safari (4) oraz Google Chrome posiadają wbudowane mechanizmy odtwarzania klipów wideo, wykorzystujące kodeki OGG i H.264. Dzięki temu można oglądać w nich filmy bez instalowania wtyczek. Jak opublikować taki klip na swojej stronie WWW?

Przed skorzystaniem z dobrodziejstw znacznika <video> trzeba poświęcić chwilę kwestiom kompatybilności. Jeszcze 10 lat temu w Internecie było znacznie mniej systemów operacyjnych i przeglądarek niż dzisiaj. Jednak przeglądarki rozpoznające nowe elementy, charakterystyczne dla języka HTML5, posiadają zaledwie kilkuprocentowe udziały rynkowe. Do tego bardzo wiele osób surfuje po Sieci z wykorzystaniem rozszerzeń takich jak AdBlock czy NoScript.

Dlatego nie można niczego zakładać na pewno – ani że nasz użytkownik będzie chciał wyświetlić zawartość poprzez wtyczkę Flasha, ani że będzie mógł obejrzeć ją poprzez wolne rozwiązania. Dlatego klip trzeba tak osadzić, aby w starszych wersjach programów to właśnie wtyczka Adobe, zainstalowana na ponad 90% komputerów na świecie, przejmowała pałeczkę.

Ale jeśli Flasha nie będzie, można wykorzystać wtyczkę QuickTime. Istnieje też mechanizm automatycznego rozpoznawania Windows Media Playera, ale działa on tylko w Internet Explorerze 8 i Windows 7. Dlatego webmaster musi przygotować jeszcze stronę z informacją o błędzie oraz linkami do najnowszych przeglądarek i wtyczek. Całość wymaga przygotowania jedynie dwóch plików wideo – OGG dla nowoczesnych przeglądarek i MP4 dla Flasha.

Ostatecznie rozwiązanie, stworzone przez Kroca Camena z camendesign.com wygląda tak:

<video width="640" height="480" controls="controls">
<source src="__MY_VIDEO__.ogv" type="video/ogg" />
<source src="__MY_VIDEO__.mp4" type="video/mp4" />
<object width="640" height="500" type="application/x-shockwave-flash" data="__FLASH_PLAYER__.swf" flashvars="file=__MY_VIDEO__.mp4">
<param name="movie" value="__FLASH_PLAYER_.swf" />
<param name="flashvars" value="file=__MY_VIDEO__.mp4" />


<object width="640" height="495" type="video/quicktime" data="__MY_VIDEO__.mp4"
<param name="src" value="__MY_VIDEO__.mp4" />

Nie ma możliwości odtworzenia pliku.
Może lepiej pobrać go na dysk? 
<a href="__MY_VIDEO__.mp4">MPEG4 / H.264 “.mp4” (Windows / Mac)</a> |
<a href="__MY_VIDEO__.ogv">Ogg Theora & Vorbis “.ogv” (Linux)</a>

</object>

</object>
</video>

«poprzednia 1 2 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

skomentuj »