HTML5 - audio i wideo

Funkcje HTML5 obejmują natywną obsługę audio i wideo bez konieczności używania Flasha.

Tagi HTML5 <audio> i <video> ułatwiają dodawanie multimediów do witryny internetowej. Musisz ustawićsrc atrybut identyfikujący źródło multimediów i zawierający atrybut sterujący, dzięki czemu użytkownik może odtwarzać i wstrzymywać multimedia.

Osadzanie wideo

Oto najprostsza forma osadzenia pliku wideo na swojej stronie internetowej -

<video src = "foo.mp4"  width = "300" height = "200" controls>
   Your browser does not support the <video> element.   
</video>

Obecna wersja robocza specyfikacji HTML5 nie określa, które formaty wideo przeglądarki powinny obsługiwać w tagu wideo. Ale najczęściej używane formaty wideo to -

Ogg - Pliki Ogg z kodekiem wideo Thedora i kodekiem audio Vorbis.
mpeg4 - Pliki MPEG4 z kodekiem wideo H.264 i kodekiem audio AAC.

Możesz użyć tagu <source>, aby określić nośnik wraz z jego typem i wieloma innymi atrybutami. Element wideo umożliwia korzystanie z wielu elementów źródłowych, a przeglądarka będzie używać pierwszego rozpoznanego formatu -

<!DOCTYPE HTML>

<html>
   <body>
      
      <video  width = "300" height = "200" controls autoplay>
         <source src = "/html5/foo.ogg" type ="video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the <video> element.
      </video>
      
   </body>
</html>

To da następujący wynik -

Specyfikacja atrybutów wideo

Tag wideo HTML5 może mieć wiele atrybutów umożliwiających sterowanie wyglądem i sposobem działania oraz różnymi funkcjami kontrolki -

Sr.No.	Atrybut i opis
1	autoplay Ten atrybut logiczny, jeśli jest określony, rozpocznie się automatyczne odtwarzanie wideo, gdy tylko będzie to możliwe, bez zatrzymywania w celu zakończenia ładowania danych.
2	autobuffer Jeśli ten atrybut Boolean jest określony, wideo rozpocznie się automatycznie buforowanie, nawet jeśli nie jest ustawione na automatyczne odtwarzanie.
3	controls Jeśli ten atrybut jest obecny, umożliwia użytkownikowi sterowanie odtwarzaniem wideo, w tym głośnością, wyszukiwaniem i wstrzymaniem / wznowieniem odtwarzania.
4	height Ten atrybut określa wysokość obszaru wyświetlania wideo w pikselach CSS.
5	loop Ten atrybut boolowski, jeśli zostanie określony, umożliwi automatyczne przeszukiwanie wideo z powrotem do początku po osiągnięciu końca.
6	preload Ten atrybut określa, że wideo zostanie załadowane podczas wczytywania strony i będzie gotowe do uruchomienia. Ignorowane, jeśli obecne jest autoodtwarzanie.
7	poster To jest adres URL obrazu, który będzie wyświetlany, dopóki użytkownik nie odtworzy lub nie zacznie szukać.
8	src Adres URL filmu do osadzenia. To jest opcjonalne; zamiast tego możesz użyć elementu <source> w bloku wideo, aby określić wideo do osadzenia.
9	width Ten atrybut określa szerokość obszaru wyświetlania wideo w pikselach CSS.

Osadzanie dźwięku

HTML5 obsługuje znacznik <audio>, który jest używany do osadzania zawartości dźwiękowej w dokumencie HTML lub XHTML w następujący sposób.

<audio src = "foo.wav" controls autoplay>
   Your browser does not support the <audio> element.   
</audio>

Obecna wersja robocza specyfikacji HTML5 nie określa, jakie formaty audio powinny obsługiwać przeglądarki w tagu audio. Ale najczęściej używanymi formatami audio sąogg, mp3 i wav.

Możesz użyć <source & ggt; do określenia mediów wraz z ich typem i wieloma innymi atrybutami. Element audio umożliwia korzystanie z wielu elementów źródłowych, a przeglądarka będzie używać pierwszego rozpoznanego formatu -

<!DOCTYPE HTML>

<html>
   <body>
      
      <audio controls autoplay>
         <source src = "/html5/audio.ogg" type = "audio/ogg" />
         <source src = "/html5/audio.wav" type = "audio/wav" />
         Your browser does not support the <audio> element.
      </audio>
      
   </body>
</html>

To da następujący wynik -

Specyfikacja atrybutów audio

Znacznik audio HTML5 może mieć wiele atrybutów do kontrolowania wyglądu i działania oraz różnych funkcji kontrolki -

Sr.No.	Atrybut i opis
1	autoplay Jeśli ten atrybut boolowski zostanie określony, dźwięk będzie automatycznie odtwarzany, gdy tylko będzie to możliwe, bez zatrzymywania w celu zakończenia ładowania danych.
2	autobuffer Ten atrybut boolowski, jeśli jest określony, dźwięk automatycznie rozpocznie buforowanie, nawet jeśli nie jest ustawiony na automatyczne odtwarzanie.
3	controls Jeśli ten atrybut jest obecny, umożliwia użytkownikowi sterowanie odtwarzaniem dźwięku, w tym głośnością, wyszukiwaniem i wstrzymywaniem / wznawianiem odtwarzania.
4	loop Ten atrybut boolowski, jeśli zostanie określony, umożliwi automatyczne przeszukiwanie audio z powrotem do początku po osiągnięciu końca.
5	preload Ten atrybut określa, że dźwięk zostanie załadowany podczas ładowania strony i będzie gotowy do uruchomienia. Ignorowane, jeśli obecne jest autoodtwarzanie.
6	src Adres URL dźwięku do osadzenia. To jest opcjonalne; zamiast tego możesz użyć elementu <source> w bloku wideo, aby określić wideo do osadzenia.

Obsługa wydarzeń medialnych

Znacznik audio i wideo HTML5 może mieć wiele atrybutów umożliwiających sterowanie różnymi funkcjami kontrolki za pomocą JavaScript -

S.No.	Opis wydarzenia
1	abort To zdarzenie jest generowane po przerwaniu odtwarzania.
2	canplay To zdarzenie jest generowane, gdy dostępna jest wystarczająca ilość danych, aby można było odtworzyć multimedia.
3	ended To zdarzenie jest generowane po zakończeniu odtwarzania.
4	error To zdarzenie jest generowane, gdy wystąpi błąd.
5	loadeddata To zdarzenie jest generowane, gdy zakończy się ładowanie pierwszej klatki nośnika.
6	loadstart To zdarzenie jest generowane po rozpoczęciu ładowania nośnika.
7	pause To zdarzenie jest generowane po wstrzymaniu odtwarzania.
8	play To zdarzenie jest generowane podczas rozpoczynania lub wznawiania odtwarzania.
9	progress To zdarzenie jest generowane okresowo w celu poinformowania o postępie pobierania mediów.
10	ratechange To zdarzenie jest generowane, gdy zmienia się prędkość odtwarzania.
11	seeked To zdarzenie jest generowane po zakończeniu operacji wyszukiwania.
12	seeking To zdarzenie jest generowane, gdy rozpoczyna się operacja wyszukiwania.
13	suspend To zdarzenie jest generowane, gdy ładowanie nośnika jest zawieszone.
14	volumechange To zdarzenie jest generowane, gdy zmienia się głośność dźwięku.
15	waiting To zdarzenie jest generowane, gdy żądana operacja (taka jak odtwarzanie) jest opóźniona w oczekiwaniu na zakończenie innej operacji (takiej jak wyszukiwanie).

Poniżej znajduje się przykład, który pozwala odtworzyć dany film -

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         function PlayVideo() {
            var v = document.getElementsByTagName("video")[0];  
            v.play(); 
         }
      </script>
   </head>
   
   <body>
   
      <form>         
         <video width = "300" height = "200" src = "/html5/foo.mp4">
         Your browser does not support the video element.
         </video>
         <br />
         <input type = "button" onclick = "PlayVideo();" value = "Play"/>
      </form>
      
   </body>
</html>

To da następujący wynik -

Konfigurowanie serwerów dla typu nośnika

Większość serwerów domyślnie nie obsługuje nośników Ogg lub mp4 z poprawnymi typami MIME, więc prawdopodobnie będziesz musiał dodać odpowiednią konfigurację.

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4