Атрибути мультимедійних елементів

5.1 Додаткові атрибути

Мультимедійні елементи HTML5, такі як <audio> і <video>, надають багато атрибутів для управління відтворенням мультимедійного контенту. Розуміння цих атрибутів дозволяє створювати більш інтерактивні і зручні веб-сторінки, які можуть адаптуватися до різних потреб користувачів. Зараз ми детально розглянемо додаткові атрибути, доступні для елементів <audio> і <video>.

Атрибут crossorigin

Атрибут crossorigin вказує, як браузер повинен обробляти запити до мультимедійних файлів, що знаходяться на інших доменах. Цей атрибут може приймати два значення:

• anonymous: запит виконується без включення облікових даних (cookies, авторизаційні заголовки тощо)
• use-credentials: запит виконується з включенням облікових даних

Приклад:

    
      <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>
    
  

Атрибути джерел <source>

Теги <source> використовуються всередині елементів <audio> і <video> для вказування кількох джерел мультимедійного контенту. Це допомагає забезпечити кросбраузерну сумісність, оскільки різні браузери можуть підтримувати різні формати.

Приклад:

    
      <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>
    
  

Атрибути і властивості для субтитрів і текстових доріжок

HTML5 надає можливість додавання субтитрів, текстових доріжок і описів за допомогою тега <track>. Цей елемент підтримує кілька типів текстових доріжок, таких як субтитри, описи і розділи.

Приклад:

    
      <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 Управління мультимедійними елементами за допомогою JavaScript

Елементи <audio> і <video> надають API для управління відтворенням з допомогою JavaScript. Це дозволяє створювати кастомні елементи управління і реалізовувати складні сценарії відтворення.

Приклад:

    
      <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;
      }
    
  

У цьому прикладі кнопки дозволяють відтворювати, ставити на паузу і зупиняти відео за допомогою JavaScript.

5.3 Події мультимедійних елементів

Елементи <audio> і <video> підтримують багато подій, які дозволяють відстежувати і реагувати на зміни у стані відтворення.

Основні події:

• play: відбувається, коли починається відтворення
• pause: відбувається, коли відтворення зупиняється
• ended: відбувається, коли відтворення завершується
• timeupdate: відбувається періодично при зміні поточного часу відтворення

Приклад використання подій:

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

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

      video.addEventListener('play', function() {
        console.log('Відео почалося');
      });

      video.addEventListener('pause', function() {
        console.log('Відео поставлено на паузу');
      });

      video.addEventListener('ended', function() {
        console.log('Відео завершилось');
      });

      video.addEventListener('timeupdate', function() {
        console.log('Поточний час: ' + video.currentTime);
      });
    
  

Цей код демонструє, як можна відстежувати основні події мультимедійного елемента.

1

Опитування

Мультимедіа в HTML, рівень 6, лекція 5

Недоступний

Мультимедіа в HTML

Мультимедіа в HTML

Відкрити