Атрибуты мультимедийных элементов

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"); // getElementById — позволяет получить доступ к элементу страницы по его id.

      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"); // getElementById — позволяет получить доступ к элементу страницы по его id.

      video.addEventListener('play', function() { // addEventListener — реагирует на действия пользователя или события браузера.
        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);
      });
    
  

Этот код демонстрирует, как можно отслеживать основные события мультимедийного элемента.

1

Задача

Модуль 1: Web Core, 4 уровень, 4 лекция

Недоступна

Источники мультимедиа

Источники мультимедиа

Открыть

1

Задача

Модуль 1: Web Core, 4 уровень, 4 лекция

Недоступна

Субтитры к видео

Субтитры к видео

Открыть

1

Опрос

Мультимедиа в HTML, 4 уровень, 4 лекция

Недоступен

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

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

Открыть