search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

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

[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.

Pliki 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:

Przeglądarka Ogg MP3 WAV
Firefox 3.6+ + - +
Safari 5+ - + +
Chrome 6+ + + -
Opera 10.5+ + - +
Internet Explorer 9+ - + +

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.

Pliki 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:

Przeglądarka Theora/Vorbis/Ogg H.264/AAC/MP4 WebM
Firefox 3.5+ + - -
Safari 3+ - + -
Chrome 5+ + + +
Opera 10.5+ + - +
Internet Explorer 9+ - + -

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.

  • Comandeer

    Mówienie o video i audio w HTML 5 bez wspominania o rozbudowanym JS-owym API jest IMO trochę bez sensu.
    „HTML5 pozwoli na wstawianie prostych nieskomplikowanych elementów takich jak najzwyklejsze odtwarzanie video czy audio”
    Canvas Video i trochę PHP w backendzie (czyt. exec dla enkodera filmików) i gotowy edytor filmików.
    autobuffer już nie ma – został preload.
    Chrome już wspiera WAV.

  • pepe

    dziekuje za pomoc, w koncu udalo mi sie dodac film tak jak chcialem 😉

  • Józef

    Jak odtworzyć plik .wrl

  • Tomek

    Albo użyć darmowego polskiego playera (również do zastosowań komercyjnych) Web-Anatomy: http://darkonyx.web-anatomy.com/pl

  • Pingback: URL()

  • Pingback: what is split app()

  • Pingback: Kata Kata Ucapan Lebaran Idul Fitri 2017/2018()