[HTML5] Jak wstawić pliki audio i video na stronie za pomocą HTML5?

W dzisiejszym artykule zamierzam poruszyć problem multimediów na stronach WWW.
Do tej pory, aby wstawić jakikolwiek film lub muzykę na stronę, trzeba było korzystać z technologii Flash. Na szczęście już dzisiaj jest możliwe pominięcie tej technologii na rzecz coraz popularniejszego standardu budowania stron WWW jakim jest język HTML5. Fakt, że na tą chwilę nie wszystkie przeglądarki wspierają ten język, ale nawet i na starszych przeglądarkach jest możliwe otwieranie stron zbudowanych w HTML posiłkując się specjalnymi skryptami JS.

Ten artykuł nie będzie dotyczył problemu wspierania HTML5 przez wszystkie przeglądarki, ale będzie dotyczył pokazywania możliwości języka HTML5 jakie daje on na tą chwilę, a w szczególności wstawianie plików multimedialnych na stronach WWW.Mówi się, że HTML5 ma wyprzeć technologię Flash. Lecz ja jestem zdania, że HTML5 pozwoli na wstawianie prostych nieskomplikowanych elementów takich jak najzwyklejsze odtwarzanie video czy audio. Podczas gdy, technologia Flash będzie pozwalała na budowanie pełnoprawnych aplikacji internetowych odpowiadających za efektowne zarządzanie tymi multimediami.
To tyle tytułem wstępu (rozbudowanego, ale jednak). Teraz pora przejść do tego co najważniejsze czyli do prezentacji kodu HTML5, który będzie odpowiadał za wyżej wymienione multimedia.

Section 1Pliki audio

Pliki audio na naszej stronie możemy wstawić za pomocą następującego kodu:

<audio controls>
	<source src="audio.mp3" />
	<source src="audio.ogg" />
</audio>

Powyższy kod można wzbogacić o dopisanie następujących atrybutów:

• controls - wyświetlanie kontrolek do odtwarzania plików audio
• autobuffer - buforowanie pliku audio
• preload - ładowanie pliku audio zaraz po załadowaniu się strony
• autoplay - odtwarzanie pliku audio zaraz po załadowaniu się strony www
• loop - zapętlanie utworu audio

Należy też wspomnieć o tym, że różne przeglądarki wspierają różne formaty dźwięku:

Z powyższego zestawienia wyraźnie widać, że najlepszym rozwiązaniem jest stosowanie conajmniej dwóch rodzajów plików audio, aby można było je otworzyć na stronie WWW przez jak największą liczbę przeglądarek.

Section 2Pliki video

Zasada wstawiania plików video na stronę jest podobna jak w przypadku plików audio:

<video width="640" height="480" controls>
	<source src="video.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
	</source><source src="video.ogv" type="video/ogg; codecs='theora, vorbis'">
</source></video>

Tak samo jak w przypadku audio, tak i video można wzbogacić o odpowiednie atrybuty:

• autoplay - automatyczne odtwarzanie plików video zaraz po ich załadowaniu
• controls - dodanie kontrolek odtwarzania plików video
• loop - zapętlanie pliku video
• preload - wczytywanie pliku video po załadowaniu się strony

Pewnie teraz ciekawi Ciebie, jak wygląda sytuacja pomiędzy formatami video a przeglądarkami? Wygląda ona następująco:

Jak widać w powyższym zestawieniu Safari i Internet Explorer korzystają tylko z jednego formatu (którego licencja jest płatna - trzeba wykupić licencję na dekodowanie materiałów na naszej stronie), a najbardziej przyjazną przeglądarką dla filmów video w HTML5 jest Google Chrome.