Встраивание и настройка видео в HTML

Введение

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

С использованием пошагового подхода учащиеся приобретут практические навыки встраивания видео в HTML5, начиная от создания простого видеоэлемента и заканчивая более сложными настройками. Участники узнают, как добавлять несколько источников видео, управлять настройками воспроизведения, устанавливать пользовательские миниатюры и создавать более привлекательные и удобные для пользователя видеоплееры прямо на веб-страницах.

Создание базового видеоэлемента с элементами управления

На этом этапе вы узнаете, как создать базовый видеоэлемент в HTML с необходимыми элементами управления. HTML5 предоставляет простой и мощный тег <video>, который позволяет встраивать видео непосредственно на веб-страницы.

Сначала создадим HTML-файл для демонстрации встраивания видео. Откройте WebIDE и создайте новый файл с именем video-demo.html в директории ~/project.

touch ~/project/video-demo.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic Video Element</title>
  </head>
  <body>
    <h1>My First Video Element</h1>

    <video controls width="640" height="360">
      Your browser does not support the video tag.
    </video>
  </body>
</html>

Разберём основные компоненты видеоэлемента:

Тег <video>: Основной контейнер для встраивания видео-контента.
Атрибут controls: Добавляет стандартные элементы управления видеоплеером (воспроизведение, пауза, громкость).
Атрибуты width и height: Устанавливают размеры видеоплеера.
Текст внутри тега: Сообщение-резерв для браузеров, не поддерживающих HTML5-видео.

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

Примечание: Узнайте больше о Просмотре HTML-файлов в WebIDE.

HTML-видеоэлемент с элементами управления

Добавление источника видео и отключение звука при воспроизведении

На этом этапе вы узнаете, как добавить источники видео в HTML-видеоэлемент и управлять начальным состоянием его воспроизведения. Мы изменим предыдущий файл video-demo.html, чтобы включить источники видео и продемонстрировать, как отключить звук видео по умолчанию.

Откройте файл ~/project/video-demo.html в WebIDE и обновите его содержимое:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Video Source and Mute</title>
  </head>
  <body>
    <h1>Video with Multiple Sources</h1>

    <video controls width="640" height="360" muted>
      <source
        src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
        type="video/mp4"
      />
      <source
        src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

Разберём новые добавления:

Теги <source>: Позволяют указать несколько форматов видео для кросс-браузерной совместимости
- Первый источник - это файл в формате MP4
- Второй источник - это файл в формате WebM (альтернативный формат)
- Браузеры будут использовать первый поддерживаемый формат
Атрибут muted: Автоматически отключает звук видео при его загрузке
- Полезно для предотвращения неожиданного воспроизведения аудио
- Можно удалить, если вы хотите, чтобы звук был включен по умолчанию
Атрибут type: Указывает MIME-тип источника видео
- Помогает браузерам определить, могут ли они воспроизвести видео

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

HTML-видеоэлемент с несколькими источниками

Реализация постера видео для пользовательской миниатюры

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

Используйте следующую команду для загрузки образца изображения:

wget https://placehold.co/640x360.png?text=Video+Thumbnail -O ~/project/video-thumbnail.png

Теперь обновите файл ~/project/video-demo.html, добавив атрибут poster:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Video with Custom Poster</title>
  </head>
  <body>
    <h1>Video with Custom Thumbnail</h1>

    <video controls width="640" height="360" muted poster="video-thumbnail.png">
      <source
        src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
        type="video/mp4"
      />
      <source
        src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

Основные моменты, связанные с атрибутом poster:

Отображает пользовательское изображение до начала воспроизведения видео.
Заменяет первый кадр видео в качестве предварительного просмотра.
Помогает создать более привлекательный интерфейс для пользователя.
Работает с локальными или удаленными изображениями.

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

Исследование атрибутов и настроек тега видео

На этом этапе вы более детально познакомитесь с различными атрибутами и настройками, доступными для HTML5-видеоэлемента. Обновите файл ~/project/video-demo.html, чтобы исследовать эти расширенные настройки:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Advanced Video Configurations</title>
  </head>
  <body>
    <h1>Exploring Video Tag Attributes</h1>

    <video
      controls
      width="640"
      height="360"
      muted
      poster="video-thumbnail.png"
      preload="metadata"
      loop
      playsinline
    >
      <source
        src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
        type="video/mp4"
      />
      <source
        src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

Исследуем новые атрибуты:

preload="metadata":
- Управляет тем, как видео загружается перед воспроизведением
- Варианты: auto (загрузить все видео), metadata (загрузить только метаданные), none (не загружать заранее)
loop:
- Сделает видео автоматически воспроизводиться заново после завершения
- Полезно для фонового или повторяющегося контента
playsinline:
- Позволяет видео воспроизводиться встроенно на мобильных устройствах
- Предотвращает автоматический переход в полноэкранный режим на устройствах iOS

Дополнительные полезные атрибуты, с которыми вы можете поэкспериментировать:

autoplay: Автоматически запускает воспроизведение видео
crossorigin: Управляет кросс-доменным доступом к видео-источникам
disablepictureinpicture: Предотвращает режим "видео в видео"

Советы профессионалов:

Не все браузеры поддерживают каждый атрибут
Всегда тестируйте на разных устройствах и браузерах
Учитывайте пользовательский опыт при использовании автоматического воспроизведения или циклического проигрывания

Улучшение опыта воспроизведения видео

На этом этапе вы узнаете, как улучшить опыт воспроизведения видео, добавив пользовательские элементы управления и стилизацию. Создайте новый файл ~/project/video-enhanced.html со следующим содержимым:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Enhanced Video Player</title>
    <style>
      .video-container {
        max-width: 640px;
        margin: 0 auto;
        position: relative;
      }
      .custom-controls {
        display: flex;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 10px;
      }
      .custom-controls button {
        background: none;
        border: none;
        color: white;
        margin-right: 10px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="video-container">
      <video id="myVideo" width="640" height="360" poster="video-thumbnail.png">
        <source
          src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
          type="video/mp4"
        />
        Your browser does not support the video tag.
      </video>

      <div class="custom-controls">
        <button onclick="togglePlay()">Play/Pause</button>
        <button onclick="muteToggle()">Mute/Unmute</button>
        <input
          type="range"
          min="0"
          max="100"
          value="50"
          onchange="changeVolume(this.value)"
        />
      </div>
    </div>

    <script>
      const video = document.getElementById("myVideo");

      function togglePlay() {
        if (video.paused) {
          video.play();
        } else {
          video.pause();
        }
      }

      function muteToggle() {
        video.muted = !video.muted;
      }

      function changeVolume(value) {
        video.volume = value / 100;
      }
    </script>
  </body>
</html>

Не беспокойтесь, если вы новичок в CSS и JavaScript. Этот пример предоставляет простой способ создания пользовательских элементов управления видео и стилизации интерфейса видеоплеера.

Основные улучшения в этом примере:

Пользовательские элементы управления видео:
- Создание панели с пользовательскими элементами управления, включая кнопки воспроизведения/паузы и отключения звука
- Добавление ползунка громкости для точного управления уровнем звука
Стилизация с использованием CSS:
- Стилизация контейнера видео и элементов управления
- Использование flexbox для компоновки
- Добавление полупрозрачного фона для элементов управления
Взаимодействие с использованием JavaScript:
- togglePlay(): Ручное управление воспроизведением/паузой видео
- muteToggle(): Переключение состояния отключения звука видео
- changeVolume(): Программное регулирование громкости видео

Этот подход дает больше гибкости в дизайне интерфейсов видеоплееров по сравнению с стандартными элементами управления браузера.

Пример интерфейса пользовательского видеоплеера

Резюме

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

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