Żebyśmy wszyscy mogli na chwilę powspominać, oto przykład, jak klasycznie włączać wideo na stronę internetową:
<object classid="clsid:d27cdb6e-ae6-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Taka składnia jest oczywiście wszystko, tylko nie ładna.
Ale nawet jeśli pominiemy kwestię estetyki: Ta składnia jest w tej formie po prostu zbyt podatna na błędy i zbyt złożona. W HTML5 wideo można łatwiej osadzać. Do tego służy element video.
Oto przykład, jak można osadzić ów element video:
<video src="video.ogv" width="300" height="200"> Twoja przeglądarka niestety nie obsługuje HTML5 </video>
To najprostsza forma. Trzy atrybuty są tu kluczowe w tej składni. Przy użyciu src podawane jest wideo do osadzenia. Zwróć tu uwagę na poprawną ścieżkę. Atrybuty width i height określają szerokość i wysokość wideo. Jeśli żadna z tych wartości nie została podana, wideo zostanie wyświetlone w swoim oryginalnym rozmiarze. Podanie tylko jednej wartości spowoduje automatyczne obliczenie drugiej wartości przez przeglądarkę. Atrybut autoplay kieruje przeglądarkę, aby wideo automatycznie rozpoczęło odtwarzanie po załadowaniu strony. Zazwyczaj nie należy tego atrybutu ustawiać, ponieważ automatyczne odtwarzanie zazwyczaj nie jest pożądane przez użytkowników. Dotyczy to zwłaszcza użytkowników urządzeń mobilnych o niskiej przepustowości. Innym interesującym atrybutem jest controls. Jeśli go użyjesz, przeglądarka pokaże elementy sterujące wideo, takie jak odtwarzanie i regulacja głośności.
<video src="video.ogv" width="300" height="200" controls> Twoja przeglądarka niestety nie obsługuje HTML5 </video>
Oto wynik w przeglądarce:
Przy pomocy wyświetlanej belki można nie tylko zatrzymywać i ponownie uruchamiać wideo, lecz także regulować głośność.
Możesz również przy użyciu atrybutu poster podać obrazek, który będzie wyświetlany do rozpoczęcia wideo. Do tego używany jest atrybut poster.
<video src="video.ogv" width="300" height="200" poster="video.gif"> Twoja przeglądarka niestety nie obsługuje HTML5 </video>
Zwróć również tutaj uwagę na poprawną ścieżkę, aby obrazek faktycznie był widoczny.
Ostrożność jest wskazana przy użyciu atrybutu autoplay. Atrybut ten określa, że wideo powinno być odtwarzane automatycznie po jego dostępności.
<video src="video.ogv" width="300" height="200" autoplay> Twoja przeglądarka niestety nie obsługuje HTML5 </video>
Jeśli chodzi o ruch sieciowy, atrybut preload może być interesujący. Określa on zachowanie przedładowywania. Atrybut może przyjąć następujące wartości:
• auto – Przeglądarka może przedładować cały plik.
• none – Plik nie musi być przedładowywany.
• metadata – Plik można przedładować.
Jeśli brakuje atrybutu preload, przeglądarka użyje domyślnych ustawień.
Wideo i kodyki
Osoba zajmująca się osadzaniem i odtwarzaniem wideo na stronach internetowych wcześniej czy później napotka problem z różnymi kodekami. Dzięki tym kodekom wideo można efektywnie kompresować i dekompresować. Problem tkwi w tym, że producenci przeglądarek do dzisiaj nie mogli się zgodzić na wspólny format kodowania. Dla HTML5 (i ostatecznie dla was) oznacza to brak jednolitych kodeków wideo i audio.
Dla wideo formaty Ogg i MP4 są już powszechnie używane. Dlatego zawsze jesteś na dobrej drodze, oferując wideo w tych dwóch formatach. Aby to zrobić, przypisujesz dwa elementy source do elementu wideo.
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Tutaj nie podajecie źródła wideo w elemencie video. Zamiast tego, umieszczane są tam tylko ogólne informacje dotyczące wyświetlania. Które wideo ma być wyświetlane, określa się za pomocą elementu source. Atrybutowi src przypisuje się odpowiednie wideo. Za atrybutem type podaje się informację o rodzaju wideo lub formacie, w jakim wideo jest dostarczone.
Jeśli podano kilka elementów source, przeglądarka zawsze odtwarza pierwsze wideo, które "pasuje". Co konkretnie oznacza "pasuje", zostanie opisane poniżej.
Ale który format obsługuje właściwie która przeglądarka? Odpowiedź na to pytanie dostarcza poniższa tabela.
| Przeglądarka | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | Od wersji 9 | |
| Mozilla Firefox | Tak | |
| Google Chrome | Tak | Tak |
| Opera | Tak | |
| Safari | Tak | |
| iPhone | Tak | |
| Android | Tak |
Tabela wyraźnie pokazuje dylemat: Interpretacja formatów jest praktycznie równomiernie rozłożona na poszczególne przeglądarki. Dlatego prawie zawsze trzeba podać wideo we wszystkich formatach.
Przy użyciu atrybutu media, który można przypisać wyłącznie elementowi source, można również wskazać jawnie, dla jakiego typu mediów jest odpowiednie to wideo. Aby wskazać wideo specjalnie dla określonych urządzeń, atrybutowi src przypisuje się atrybut media. Za pomocą tego atrybutu media określa się pożądany typ mediów.
Jednym z możliwych zastosowań elementu source może być następujące:
<video width="400" height="300">
<!-- Tylko dla urządzeń mobilnych -->
<source src="video_mobil.ogg" media="handheld" />
<!-- Dla wszystkich innych urządzeń -->
<source src="video_normal.ogg" media="all" />
</video>
W tym przypadku za pomocą atrybutu media sprawdza się, czy jest to urządzenie mobilne. W takim przypadku odtwarzane jest wideo w mniejszym rozmiarze. Jeśli urządzenie jest inne, używana jest wartość all.
Bezpieczne osadzanie wideo
HTML5, jak wiadomo, nie jest jeszcze obsługiwany przez wszystkie przeglądarki. Dotyczy to oczywiście także elementu video. Rozwiązanie stanowi połączenie różnych technik osadzania. Tutaj dobrze znane elementy object i embed są łączone z elementem video. Może to wyglądać następująco:
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Osadzone w ten sposób wideo będzie odtwarzane w większości przeglądarek. Te przeglądarki, które obsługują element video, z niego korzystają. Pozostałe przeglądarki natomiast wykorzystują informacje w elemencie object lub embed.
