[HTML|JS|CSS] HTML5: Audio and video

Standard HTML5 wprowadza dwa nowe tagi: <audio> i <video>. Umożliwiają one osadzanie plików multimedialnych w stronach www, zapewniając jednocześnie podstawową funkcjonalność do ich odtwarzania. Jedną z głównych zalet w porównaniu z dotychczasowym sposobem odtwarzania multimediów jest brak zapotrzebowania na technologię Flash, z którą spore problemy występują np. na iPadach.

1. Tag <video>

Aby odtwarzać filmy na naszej stronie, wystarczy dostarczyć plik oraz osadzić poniższy fragment kodu na stronie. 

<video width="320" height="240" controls="controls">
 <source src="Two Steps from Hell - Heart of Courage.mp4" type="video/mp4">   
  Your browser does not support video tag
</video>

Tekst o nie wspieraniu tagu zostanie przykryty w momencie gdy przeglądarka rozpozna tag source. Dodatkowo mamy do dyspozycji kilka użytecznych atrybutów.

• autoplay - true lub false w zależności od tego, czy film ma startować od razu przy przeładowaniu strony.
• controls - w zależności od tego, czy występuje pojawia się pasek z kontrolkami obsługującymi film
• loop  gdy ustawimy na true, film będzie się zaczynał od nowa po zakończeniu odtwarzania
• poster - obrazek, który będzie wyświetlany, gdy nie zostanie odnaleziony film
• onerror - zdarzenie błędu, które może być obsłużone w JavaScripcie.

2. Tag <audio>

W bardzo podobny sposób działa tag do odtwarzania plików dźwiękowych. W tym przypadku warto pamiętać o tym, która przeglądarka wspiera które formaty (choć oczywiście sytuacja jest dynamiczna i już wkrótce ten problem może się nie pojawiać). Spis kompatybilności przeglądarek z formatami audio tutaj. Jeżeli chcemy wspierać wiele przeglądarek, można zawsze umieścić źródła do plików w wielu formatach. Przeglądarka wybierze pierwszy wspierany.

<audio controls="controls">
 <source src="Wilderness.ogg" type="audio/ogg">
 <source src="Wilderness.mp3" type="audio/mp3">
 Your browser does not support audio tag
</audio>

Z atrybutów opisanych dla video mamy dostępne wszystkie poza poster.