Wstawianie wideo i audio w HTML (<video>, <audio>)

HTML umożliwia łatwe osadzanie multimediów, takich jak wideo i audio, bez potrzeby korzystania z dodatkowych wtyczek. Dzięki elementom <video> i <audio>, możemy dodać filmy i dźwięki do naszych stron internetowych, zapewniając użytkownikom bogatsze doświadczenie. W tym artykule dowiesz się, jak korzystać z tych elementów i jakie atrybuty można zastosować, aby dostosować ich działanie.

Wstawianie wideo w HTML za pomocą elementu <video>

<video src="film.mp4" controls>
    Twoja przeglądarka nie obsługuje elementu <code>video</code>.
</video>

   See the Pen    Untitled by EE-Informatyk.pl (@eeinformatyk)   on CodePen. 
 

Atrybuty elementu video

• controls - Wyświetla elementy sterujące (odtwarzanie, pauza, przewijanie).
• autoplay - Automatycznie rozpoczyna odtwarzanie wideo po załadowaniu strony. Uwaga: Wiele przeglądarek blokuje automatyczne odtwarzanie dźwięku, więc może być konieczne użycie muted.
• muted - Wycisza wideo, co może być przydatne, jeśli używamy autoplay.
• loop - Powoduje, że wideo będzie odtwarzane w pętli.
• poster - Ustawia obraz, który będzie wyświetlany przed rozpoczęciem odtwarzania wideo (np. miniaturkę).

Wstawianie audio w HTML za pomocą elementu <audio>

<audio src="muzyka.mp3" controls>     Twoja przeglądarka nie obsługuje elementu <code>audio</code>. </audio><audio src="muzyka.mp3" controls>
    Twoja przeglądarka nie obsługuje elementu <code>audio</code>.
</audio>

Atrybuty elementu <audio>

• controls - Wyświetla elementy sterujące (odtwarzanie, pauza, przewijanie).
• autoplay - Automatycznie rozpoczyna odtwarzanie audio po załadowaniu strony.
• loop - Powoduje, że dźwięk będzie odtwarzany w pętli.
• muted - Wycisza dźwięk.

Najczęściej używane formaty:

• Wideo - MP4 (H.264), WebM (VP8/VP9), Ogg (Theora)
• Audio - MP3, Ogg (Vorbis), WAV