Atrybuty elementów multimedialnych

5.1 Dodatkowe atrybuty

Elementy multimedialne HTML5, takie jak <audio> i <video>, oferują wiele atrybutów do zarządzania odtwarzaniem treści multimedialnych. Zrozumienie tych atrybutów pozwala tworzyć bardziej interaktywne i przyjazne strony internetowe, które mogą dostosować się do różnych potrzeb użytkowników. Teraz szczegółowo omówimy dodatkowe atrybuty dostępne dla elementów <audio> i <video>.

Atrybut crossorigin

Atrybut crossorigin określa, jak przeglądarka powinna obsługiwać żądania do plików multimedialnych znajdujących się na innych domenach. Ten atrybut może przyjmować dwa wartości:

• anonymous: żądanie jest realizowane bez uwzględnienia danych uwierzytelniających (cookies, nagłówki autoryzacyjne itp.)
• use-credentials: żądanie jest realizowane z uwzględnieniem danych uwierzytelniających

Przykład:

    
      <audio src="https://example.com/audiofile.mp3" controls crossorigin="anonymous"></audio>
      <video src="https://example.com/videofile.mp4" controls crossorigin="use-credentials" width="800" height="450"></video>
    
  

Atrybuty źródeł <source>

Tagi <source> używane są wewnątrz elementów <audio> i <video> do wskazania wielu źródeł treści multimedialnych. Pomaga to zapewnić kompatybilność między różnymi przeglądarkami, ponieważ różne przeglądarki mogą obsługiwać różne formaty.

Przykład:

    
      <video controls width="600">
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Your browser does not support the video element.
      </video>
    
  

Atrybuty i właściwości dla napisów i ścieżek tekstowych

HTML5 oferuje możliwość dodawania napisów, ścieżek tekstowych i opisów za pomocą taga <track>. Ten element obsługuje kilka typów ścieżek tekstowych, takich jak napisy, opisy i rozdziały.

Przykład:

    
      <video controls width="600">
        <source src="videofile.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
        <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
        Your browser does not support the video element.
      </video>
    
  

5.2 Zarządzanie elementami multimedialnymi za pomocą JavaScript

Elementy <audio> i <video> oferują API do zarządzania odtwarzaniem za pomocą JavaScript. To pozwala tworzyć niestandardowe elementy sterujące i implementować zaawansowane scenariusze odtwarzania.

Przykład:

    
      <video id="myVideo" src="videofile.mp4" controls></video>
      <button onclick="playVideo()">Play</button>
      <button onclick="pauseVideo()">Pause</button>
      <button onclick="stopVideo()">Stop</button>
    
  

    
      const video = document.getElementById("myVideo");

      function playVideo() {
        video.play();
      }

      function pauseVideo() {
        video.pause();
      }

      function stopVideo() {
        video.pause();
        video.currentTime = 0;
      }
    
  

W tym przykładzie przyciski umożliwiają odtwarzanie, wstrzymywanie i zatrzymywanie wideo za pomocą JavaScript.

5.3 Wydarzenia elementów multimedialnych

Elementy <audio> i <video> obsługują wiele wydarzeń, które pozwalają śledzić i reagować na zmiany w stanie odtwarzania.

Podstawowe wydarzenia:

• play: zachodzi, gdy rozpoczyna się odtwarzanie
• pause: zachodzi, gdy odtwarzanie jest wstrzymane
• ended: zachodzi, gdy odtwarzanie się zakończy
• timeupdate: zachodzi okresowo w miarę zmiany aktualnego czasu odtwarzania

Przykład użycia wydarzeń:

    
      <video id="myVideo" src="videofile.mp4" controls></video>
    
  

    
      const video = document.getElementById("myVideo");

      video.addEventListener('play', function() {
        console.log('Video started playing');
      });

      video.addEventListener('pause', function() {
        console.log('Video paused');
      });

      video.addEventListener('ended', function() {
        console.log('Video ended');
      });

      video.addEventListener('timeupdate', function() {
        console.log('Current time: ' + video.currentTime);
      });
    
  

Ten kod pokazuje, jak można śledzić podstawowe wydarzenia elementu multimedialnego.

1

Ankieta/quiz

Multimedia w HTML, poziom 6, lekcja 5

Niedostępny

Multimedia w HTML

Multimedia w HTML

Otwórz