publikuj: Opublikuj w wykop.pl Opublikuj we flaker.pl Opublikuj na OSnews.pl Opublikuj w delicious wydrukuj
skomentuj »

TAGI: html 5 , video , wideo , flash , ogg theora

2009-07-16 16:10  |  Wojciech Wowra

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

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" />
<!--[if gt IE 6 - opcjonalny fragment dla użytkowników IE6]>
<object width="640" height="495" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<param name="src" value="__MY_VIDEO__.mp4" /><!
[endif]-->
<!--[if gt IE 6]><!-->
<object width="640" height="495" type="video/quicktime" data="__MY_VIDEO__.mp4"
<param name="src" value="__MY_VIDEO__.mp4" />
<!--<![endif]-->
<p><strong>Nie ma możliwości odtworzenia pliku.</strong>
Może lepiej pobrać go na dysk?<br />
<a href="__MY_VIDEO__.mp4">MPEG4 / H.264 “.mp4” (Windows / Mac)</a> |
<a href="__MY_VIDEO__.ogv">Ogg Theora &amp; Vorbis “.ogv” (Linux)</a>
</p>
<!--[if gt IE 6]><!--></object><!--<![endif]-->
<!--[if gt IE 6]></object><![endif]-->
</object>
</video>

«poprzednia 1 2 następna »

publikuj: Opublikuj w wykop.pl Opublikuj we flaker.pl Opublikuj na OSnews.pl Opublikuj w delicious wydrukuj
skomentuj »

Polecane książki

Czytaj Webhosting

Chcesz być na bieżąco z naszymi informacjami? Zapisz się na Newsletter.

Zarejestruj domenę

Sprawdź dostępność swojej domeny:

.pl: 0 zł   .com: 19.90 zł
.com.pl: 0 zł   .eu: 19.90 zł