Вставка видео: <video>

4.1 Основы тега <video>

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

Простейший пример

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

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

Пример с несколькими источниками

Чтобы обеспечить поддержку разных браузеров, можно указать несколько источников видео с помощью тега <source>. Это позволяет браузеру выбрать поддерживаемый формат видео.

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

Атрибуты тега <video>

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

4.2 Основные атрибуты

1. Автоматическое воспроизведение

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

    
      <video src="videofile.mp4" autoplay></video>
    
  

2. Зацикливание видео

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

    
      <video src="videofile.mp4" loop></video>
    
  

3. Отключение звука

Атрибут muted отключает звук видеофайла при загрузке. Это может быть полезно, если вы хотите, чтобы видео воспроизводилось без звука по умолчанию, и пользователь мог включить звук при необходимости.

    
      <video src="videofile.mp4" muted></video>
    
  

4. Предварительная загрузка

Атрибут preload указывает браузеру, как он должен загружать видеофайл при загрузке страницы. Он может принимать одно из трех значений:

• none: браузер не должен предварительно загружать видео
• metadata: браузер должен загружать только метаданные (длительность, размеры и т. д.)
• auto: браузер должен полностью загружать видео, когда страница загружается

    
      <video src="videofile.mp4" preload="auto"></video>
    
  

5. Постер

Атрибут poster указывает изображение-заполнитель, которое отображается до начала воспроизведения видео. Это может быть полезно для предоставления пользователю визуальной информации о содержимом видео.

    
      <video src="videofile.mp4" poster="posterimage.jpg"></video>
    
  

4.3 Поддерживаемые форматы видео

Для обеспечения кроссбраузерной совместимости рекомендуется использовать несколько форматов видео. Наиболее распространенные форматы включают MP4, WebM и OGG.

Формат MP4

MP4 (MPEG-4 Part 14) — один из самых популярных форматов видео. Он поддерживается большинством браузеров и устройств. MP4 использует сжатие с потерями и обеспечивает хорошее качество видео при относительно небольшом размере файла.

Пример:

    
      <video src="videofile.mp4" type="video/mp4"></video>
    
  

Формат WebM

WebM — открытый формат сжатия видео, разработанный для использования в интернете. Он поддерживается большинством современных браузеров и обеспечивает хорошее качество видео.

Пример:

    
      <video src="videofile.webm" type="video/webm"></video>
    
  

Формат OGG

OGG (Ogg Theora) — открытый формат видео, который поддерживается многими браузерами. Этот формат обеспечивает хорошее качество видео и часто используется как альтернатива MP4 и WebM.

Пример:

    
      <video src="videofile.ogv" type="video/ogg"></video>
    
  

Пример использования нескольких форматов для обеспечения совместимости

Для обеспечения кроссбраузерной совместимости рекомендуется указать несколько источников видео в разных форматах. Браузер выберет первый поддерживаемый формат.

    
      <video width="600" controls autoplay muted>
        <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>
    
  

1

Задача

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

Недоступна

Видео с управлением

Видео с управлением

Открыть

1

Задача

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

Недоступна

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

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

Открыть