После процесса подготовки меня к экзамену mws я перехожу к следующей теме: Видео и аудиоконтент. Материал, показанный ниже, взят из Документов MDN.

Мы говорим о том, как правильно добавить видео- и аудиоплееры на наш веб-сайт, мы обратимся к тегам <video> и <audio> и о том, как добавлять титры в наши видео.

Тег <video>

Тег видео используется для простого встраивания видео:

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>

Свойства тега в приведенном выше примере:

src

Так же, как элемент <img>, атрибут src (источник) содержит путь к видео, которое вы хотите встроить. Это работает точно так же.

контроль

Пользователи должны иметь возможность управлять воспроизведением видео и аудио. Вы должны либо использовать атрибут controls, чтобы включить собственный интерфейс управления браузера, либо создать свой интерфейс с помощью соответствующего JavaScript API.

Тег ‹p› внутри тега ‹video›

Это называется резервное содержание - оно будет отображаться, если браузер, осуществляющий доступ к странице, не поддерживает элемент <video>, что позволяет нам предоставить резервный вариант для старых браузеров.

Встроенное видео в приведенном выше примере кода будет выглядеть так:

У нас возникла проблема с приведенным выше примером: если вы попытались загрузить с помощью браузера, такого как Safari или Explorer, видео не будет воспроизводиться, это связано с тем, что они не поддерживают формат видео.

Итак, как мы это сделаем? Взгляните на следующее:

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

Мы вынули атрибут src из тега <video> и вместо этого включили отдельные элементы <source>, которые указывают на их собственные источники, с этим мы гарантируем, что они пройдут через элементы <source> и воспроизведут первый, который имеет кодек для поддержки. .

Мы также включили атрибут type, это необязательно, если они не включены, браузеры будут загружать и пытаться воспроизвести каждый файл, пока не найдут тот, который работает, что потребует еще больше времени и ресурсов.

Другие функции ‹video›

Есть и другие функции, которые вы можете включить в тег <video>:

<video controls width="400" height="400"
       loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

ширина и высота

Вы можете контролировать размер видео либо с помощью этих атрибутов, либо с помощью CSS. В обоих случаях видео сохраняет исходное соотношение ширины и высоты, известное как соотношение сторон.

Автовоспроизведение

Этот атрибут заставляет воспроизведение аудио или видео сразу же, пока загружается остальная часть страницы.

петля

Этот атрибут заставляет видео (или аудио) снова начинать воспроизведение всякий раз, когда оно заканчивается. psdta: это тоже может раздражать, поэтому используйте только в случае крайней необходимости. 😵

приглушенный

Этот атрибут заставляет мультимедиа воспроизводиться с отключенным звуком по умолчанию.

плакат

Этот атрибут принимает в качестве значения URL-адрес изображения, которое будет отображаться перед воспроизведением видео.

предварительная нагрузка

этот атрибут используется в элементе для буферизации больших файлов. Может принимать одно из трех значений:

  • "none" не буферизует файл
  • "auto" буферизует медиафайл
  • "metadata" буферизует только метаданные файла

Примечание: мы не включили атрибут autoplay. Если видео начинает воспроизводиться сразу после загрузки страницы, вы не увидите плакат 🙃

Тег ‹audio›

Тег <audio> работает так же, как и тег <video>, с некоторыми отличиями, как описано ниже, и вот небольшой пример:

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>

Это дает что-то вроде этого:

Примечание. Тег <audio> не поддерживает свойства width, height и poster, поскольку это не визуальный компонент.

И последняя тема «Отображение видеотекста или титров».

Для обеспечения транскрипции слов, произносимых в аудио / видео, используется формат WebVTT и <track>element.

WebVTT - это формат для записи текстовых файлов, содержащих несколько строк текста вместе с метаданными, такими как время в видео, в которое должна отображаться каждая текстовая строка, и даже ограниченная информация о стиле / позиционировании. Эти текстовые строки называются подсказками.

Это пример файла WebVTT:

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

  ...

Чтобы это отображалось вместе с носителем HTML, нам необходимо:

  1. Сохраните его как .vtt файл.
  2. Ссылка на файл .vtt с тегом <track> должна быть помещена в <audio> или <video>, но после всех <source> тегов. Используйте атрибут kind, чтобы указать, являются ли реплики subtitles, captions или descriptions. Кроме того, используйте srclang, чтобы указать браузеру, на каком языке вы написали субтитры.

Вот пример:

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

Подробнее об использовании WebVTT читайте в статье Добавление титров и субтитров к HTML5-видео. Вы можете найти пример, который идет вместе с этой статьей на Github, написанной Яном Девлином (см. Также исходный код).

Спасибо за чтение и до встречи в следующем посте серии «Специалист по мобильной сети» 😬.