Video

HTML5 wprowadziło wiele znaczących ulepszeń do języka HTML, w tym wsparcie dla multimediów bezpośrednio w przeglądarce, bez potrzeby stosowania zewnętrznych wtyczek. Element <video>, jedna z tych innowacji, umożliwia łatwe włączanie filmów do stron internetowych, oferując jednocześnie różnorodne kontroliki do zarządzania odtwarzaniem. W tej lekcji omówimy, jak korzystać z elementu <video> w HTML5, przedstawiając różne dostępne atrybuty i metody JavaScript, które pozwalają na bardziej zaawansowaną kontrolę nad odtwarzanymi mediami.

Przykład kodu: Podstawowe użycie elementu <video>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wykorzystanie wideo w HTML5</title>
</head>
<body>
    <!-- Podstawowy przykład elementu video -->
    <video src="movie.mp4" controls width="320" height="240">
        Przepraszamy, Twoja przeglądarka nie obsługuje wbudowanych wideo.
    </video>

    <script>
        // Przykład użycia JavaScript do kontrolowania wideo
        const video = document.querySelector('video');

        // Funkcja odtwarzająca wideo
        function playVideo() {
            video.play();
        }

        // Funkcja zatrzymująca wideo
        function pauseVideo() {
            video.pause();
        }
    </script>
</body>
</html>

Kontrolki i atrybuty elementu <video>

Element <video> w HTML5 posiada wiele atrybutów, które pozwalają na dostosowanie jego działania:

  • src: Ścieżka do pliku wideo.
  • controls: Jeśli obecne, pokazuje domyślne kontroliki odtwarzacza (odtwarzanie, pauza, pasek postępu itp.).
  • autoplay: Automatycznie odtwarza wideo po załadowaniu strony.
  • loop: Powtarza wideo po zakończeniu.
  • muted: Wycisza dźwięk wideo.
  • width i height: Ustawia szerokość i wysokość wideo.
  • poster: Ścieżka do obrazu, który będzie wyświetlany, zanim wideo zostanie odtworzone.

Zaawansowane zarządzanie wideo za pomocą JavaScript

Za pomocą JavaScript możemy uzyskać bardziej zaawansowaną kontrolę nad wideo, np.:

// Odtwarzanie wideo
video.play();

// Pauzowanie wideo
video.pause();

// Skakanie do konkretnej sekundy wideo
video.currentTime = 10; // Skocz do 10 sekundy

// Zmiana głośności
video.volume = 0.5; // Ustaw głośność na 50%

// Włączenie/wyłączenie wyciszenia
video.muted = !video.muted;

Podsumowanie

Wykorzystanie elementu <video> w HTML5 znacznie upraszcza dodawanie i kontrolowanie multimediów na stronach internetowych. Dzięki dostępnym atrybutom i metodą JavaScript, twórcy mogą oferować bogate wrażenia multimedialne bez konieczności polegania na zewnętrznych wtyczkach. To tylko jeden z wielu przykładów, jak HTML5 ułatwia tworzenie interaktywnych i zaawansowanych stron internetowych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top