Тег <video>

Видеоплеер
  • Категории: Потоковое содержимое, Фразовое содержимое, Встроенное содержимое, Интерактивное содержимое
  • Контекст:

    Где ожидается встроенное содержимое.

  • Модель:

    Прозрачная модель, но без других медиа-объектов. Если есть атрибут src, то может содержать ноль или более элементов <track>. Если атрибут src не задан, то ноль или более элементов <source> и <track>.

Тег <video> (от англ. "video" - видео) позволяет вставить на страницу видеоплеер для просмотра медиа-файлов. Как и в случае с изображением, для указания источника видео мы можем использовать атрибут src. Но кроме этого, есть возможность задать несколько источников через вложенные элементы <source>, а также текстовые дорожки через элементы <track>.

Изначально видеоплеер никак не отображается и мы можем управлять им только через JavaScript. Для отображения элементов управления плеером необходимо добавить ему атрибут controls. При этом его внешний вид в различных браузерах может отличаться.

Атрибуты

  • Глобальные атрибуты
  • controls - отображение элементов управления
  • width - ширина
  • height - высота
  • autoplay - автоматическое воспроизведение (при наличии muted)
  • loop - зацикливание
  • preload - поведение загрузки файла
  • muted - отключает у видео звук
  • poster - позволяет установить начальное изображение, которое отображается до запуска видео

  • Вставка видео

    Используем элемент <video> с атрибутом src, чтобы добавить на страницу видео-плеер. А также атрибут controls, чтобы браузер отобразил его интерфейс:

  • Автозапуск и зацикливание

    Атрибут autoplay запускает автоматические воспроизведение записи. Однако работает он только при наличии атрибута muted, который отключает у плеера звук. Кроме этого мы можем использовать атрибут loop, чтобы сделать воспроизведение цикличным:

  • Собственный постер

    При помощи атрибута poster мы можем добавить нашему видео начальное превью, которое будет отображаться до запуска воспроизведения. Старайтесь, чтобы размер вашего постера пропорционально соответствовал размеру видео, иначе он будет искажен:

  • Вставка аудио

    Видеоплеер прекрасно может работать и с аудио-файлами. Для этого достаточно передать ему соответствующий файл без каких-либо дополнительных настроек:

  • Несколько источников

    Мы можем использовать вложенные элементы <source>, чтобы указать альтернативные источники нашего видео. Так любой браузер сможет выбрать для себя наиболее подходящий формат и воспроизвести его. Всего HTML поддерживает три формата видео:

    • Ogg (.ogg) - разработан Фондом Xiph.Org
    • WebM (.webm) - разработан веб-гигантами, Mozilla, Opera, Adobe и Google.
    • MPEG-4 или MP4 (.mp4) - разработан экспертной группой Moving Pictures на основе QuickTime. Обычно используется в новых видеокамерах и телевизионном оборудовании. Поддерживается всеми браузерами и рекомендовано YouTube.

  • Альтернативный контент

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

Поделитесь данной записью с друзьями