Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Видео

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

Как добавить видео

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

TL;DR

  • Используйте элемент video для загрузки, декодирования и воспроизведения видео на своем сайте.
  • Запишите видео в нескольких форматах, адаптированных под различные мобильные платформы.
  • Установите корректный размер видеофайлов; он не должен превышать максимальный размер контейнеров.
  • Контент должен быть доступен пользователям с ограниченными возможностями. Добавьте track как дочерний элемент video.

Добавьте элемент video

Добавьте элемент video для загрузки, декодирования и воспроизведения видео на вашем сайте:

<video src="chrome.webm" type="video/webm">
    <p>Ваш браузер не поддерживает элемент video.</p>
</video>

Укажите несколько форматов видеофайла

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

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4">
  <p>This browser does not support the video element.</p>
</video>

Когда браузер анализирует теги , он использует дополнительный атрибут type для определения, какой файл загрузить и воспроизвести. Если браузер поддерживает формат WebM, он воспроизведет файл chrome.webm. Если нет, браузер попытается вопроизвести видеофайлы в формате MPEG-4. Ознакомьтесь с Учебником по цифровым медиа для гиков . В нем вы найдете подробную информацию о том, как работают аудио- и видеофайлы в Сети.

Подобный подход имеет целый ряд преимуществ по сравнению с использованием скриптов HTML или исполнением скриптов на сервере, особенно в среде мобильных устройств:

  • Разработчики могут перечислить форматы в порядке их предпочтительности.
  • Снижение времени реакции за счет переключения на стороне клиента. Для получения контента делается только один запрос.
  • Проще, быстрее и надежнее дать самому браузеру выбрать формат, чем использовать поддерживаемую сервером базу данных с распознаванием на стороне пользовательского агента.
  • Указание типа источника каждого файла повышает производительность сети. Браузер может выбрать источник видео, не прибегая к загрузке части файла для опознания формата.

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

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

Укажите время начала и окончания

Чтобы сохранить пропускную способность и сделать сайт более быстрым, используйте Media Fragments API для определения времени начала и окончания элемента video.

Для добавления медиафрагмента просто укажите #t=[start_time][,end_time] в URL медиафайла. Например, чтобы воспроизвести фрагмент видео с 5 по 10 секунду, укажите:

<source src="video/chrome.webm#t=5,10" type="video/webm">

Вы также можете использовать Media Fragments API для просмотра различных фрагментов одного и того же видео (например, как на DVD) без кодирования и загрузки нескольких файлов.

В заголовках ответов должно стоять "Accept Ranges: bytes" (вы можете проверить это с помощью инструментов разработчика вашего браузера):

Скриншот инструментов разрабочика Chrome: Accepts-Ranges: bytes

Добавьте постер

Добавьте в элемент video атрибут poster. Благодаря этому пользователи смогут сразу же получить общее представление о контенте. Им не надо будет загружать видео полностью или начинать просматривать его.

<video poster="poster.jpg" ...>
  ...
</video>

Постер также может пригодиться, если элемент src указан некорректно или браузер не поддерживает ни один из предложенных форматов видео. Единственным недостатком использования постеров является дополнительный запрос файла, который незначительно снижает пропускную способность и требует обработки. Дополнительную информацию вы можете найти в этой статье по оптимизации изображений.

Ниже представлены для сравнения два видео - без постера и с постером. Мы сделали постер черно-белым, чтобы пользователь мог сразу понять, что это не само видео:

Скриншот Android Chrome, вертикальная ориентация: без постера Скриншот Android Chrome, вертикальная ориентация: с постером

Как настроить резервные варианты для устаревших платформ

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

Проверьте, какие форматы поддерживаются

Чтобы уточнить, какие форматы видео поддерживаются, используйте canPlayType(). При этом способе берется строка аргументов, состоящая из mime-type и дополнительных кодеков, и возвращается одно из следующих значений:

Возвращаемое значение Описание
(пустая строка) Контейнер и/или кодек не поддерживаются.
maybe Контейнер и кодеки, возможно, поддерживаются, но браузеру необходимо загрузить какой-либо видеофайл для проверки.
probably Видимо, формат поддерживается.

Ниже приведены примеры аргументов canPlayType() и возвращаемых значений при работе в Chrome:

Тип Ответ на запрос
video/xyz (пустая строка)
video/xyz; codecs="avc1.42E01E, mp4a.40.2" (пустая строка)
video/xyz; codecs="nonsense, noise" (пустая строка)
video/mp4; codecs="avc1.42E01E, mp4a.40.2" probably
video/webm maybe
video/webm; codecs="vp8, vorbis" probably

Запишите видео в нескольких форматах

Существует целый ряд инструментов, с помощью которых можно сохранить видео в различных форматах:

Проверьте, какие форматы использовались

Хотите знать, какой формат видео был на самом деле выбран браузером?

Чтобы получить данные о том, какой источник использовался, укажите в JavaScript свойство видео currentSrc.

Хотите посмотреть, как это работает? Вот пример. Chrome и Firefox используют chrome.webm (поскольку это первый пункт в списке поддерживаемых браузером форматов). В то же время Safari использует chrome.mp4.

Корректно определите размер видеофайлов

Размер видеофайла имеет значение, поскольку влияет на восприятие контента.

Проверьте размер видео

Реальный размер видеокадра может отличаться от размера элемента video (так же, как размеры демонстрируемого изображения могут отличаться от изначальных).

Чтобы проверить кодированный размер видео, используйте такие свойства элемента video, как videoWidth и videoHeight. Свойства width и height сообщают размеры элемента video, которые были определены с помощью атрибутов высоты и ширины CSS или встроенных атрибутов.

Убедитесь, что видеофайлы не превышают максимальные размеры контейнеров

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

Скриншот Chrome для Android, вертикальная ориентация: немодифицированный элемент video превышает размеры области просмотра Скриншот Chrome для Android, горизонтальная ориентация: немодифицированный элемент video превышает размеры области просмотра

Вы можете контролировать размеры видео с помощью JavaScript или CSS. Библиотеки и плагины JavaScript, такие как FitVids, позволяют задать требуемый размер и соотношение сторон даже для Flash video с YouTube и других ресурсов.

Используйте медиа-запросыCSS, чтобы определить размер элементов в зависимости от размера области просмотра. max-width: 100% - отличный вариант!

Для медиаконтента в окнах iframe (в частности, видео на YouTube) попробуйте отзывчивый подход (например, предложенный Джоном Сурдаковски).

CSS:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML:

<div class="video-container">
  <iframe src="//www.youtube.com/embed/l-BA9Ee2XuM"
          frameborder="0" width="560" height="315">
  </iframe>
</div>

Сравните образец видео, настроенного в соответствии с концепцией отзывчивого дизайна, с видео, не учитывающим этой концепции.

Как настроить видеопроигрыватель

Различные платформы по-разному отображают видео. Мобильные решения должны учитывать расположение устройства. Для управления полноэкранным воспроизведением видео используйте Fullscreen API.

Различные платформы по-разному отображают видео. Мобильные решения должны учитывать ориентацию устройства. Для управления полноэкранным воспроизведением видео используйте Fullscreen API.

Изменение ориентации на различных устройствах

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

Safari для iPhone отлично справляется с задачей переключения между вертикальной и горизонтальной ориентацией:

Скриншот видеопроигрывателя в Safati на iPhone, вертикальная ориентация Скриншот видеопроигрывателя в Safati на iPhone, горизонтальная ориентация

На iPad, а также в браузере Chrome для Android изменение ориентации устройства может оказаться более проблематичным. В частности, ненастроенный видеопроигрыватель на iPad в горизонтальном расположении выглядит так:

Скриншот видеопроигрывателя в Safati на iPad Retina, горизонтальная ориентация

Если вы установите настройки видео "width: 100%" или "max-width: 100%" с помощью CSS, это поможет решить многие проблемы, связанные с ориентацией устройства. Вы также можете использовать полноэкранный режим просмотра.

Встроенное видео или полноэкранный режим

Различные платформы по-разному отображают видео. Safari для iPhone отображает элемент video как встроенный в веб-страницу, однако воспроизводит его в полноэкранном режиме:

Скриншот видео на iPhone, вертикальная ориентация

На устройствах Android пользователь может запустить полноэкранный режим, нажав на соответствующий значок. Однако по умолчанию видео будет воспроизводиться как встроенное:

Скриншот видео в Chrome для Android, вертикальная ориентация

Safari для iPad воспроизводит видео как встроенное:

Скриншот видео в Safari для iPad Retina, горизонтальная ориентация

Управление полноэкранным отображением контента

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

Полноэкранное отображение элемента, например video:

elem.requestFullScreen();

Полноэкранное отображение всего документа:

document.body.requestFullScreen();

Вы также можете установить прослушивание событий, связанных с изменением полноэкранного режима:

video.addEventListener("fullscreenchange", handler);

Или проверить, отображается ли элемент в полноэкранном режиме:

console.log("In full screen mode: ", video.displayingFullscreen);

Кроме того, вы можете использовать псевдо-класс CSS fullscreen для изменения способа отображения элементов в полноэкранном режиме.

На устройствах, поддерживающих Fullscreen API, вы можете использовать значки для обозначения места под видео:

Хотите посмотреть, как это работает? Тогда вам сюда.

Для пользователей с ограниченными возможностями

Доступность контента для всех категорий пользователей очень важна. Люди с нарушениями слуха или зрения не смогут ознакомиться с вашим видео, если в нем не будет субтитров или голосового описания (тифлокомментариев). На их добавление у вас уйдет совсем немного времени. Зато все пользователи смогут ознакомиться с вашими материалами. Немного усилий - и контент доступен для всех!

Добавьте субтитры для пользователей с ограниченными возможностями

Чтобы с видео могли ознакомиться все пользователи мобильных устройств, добавьте субтитры или голосовое описание при помощи элемента track.

При использовании элемента track субтитры будут выглядеть следующим образом:

Скриншот с субтитрами, отображаемыми с помощью элемента track в браузере Chrome для Android

Добавьте элемент track

Вставить субтитры легко - просто добавьте track как дочерний элемент video:

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
  <track src="chrome-subtitles-en.vtt" label="English captions"
         kind="captions" srclang="en" default>
  <p>This browser does not support the video element.</p>
</video>

Атрибут src элемента track определеяет местоположение файла с треком.

Маркируйте субтитры в файле трека

Файл трека состоит из разбитых по времени кусочков текста в формате WebVTT:

WEBVTT

00:00.000 --> 00:04.000
На ветке дерева сидит человек с ноутбуком.

00:05.000 --> 00:08.000
Ветка ломается, и он начинает падать.

...

Краткий справочник

Краткий обзор свойств элемента video.

Атрибуты элемента video

Полный список атрибутов элемента video и их описание вы можете найти здесь.

Атрибут Совместимость Описание
src Все браузеры Адрес (URL) видео.
poster Все браузеры Адрес (URL) изображения, которое браузер будет показывать при отображении видео без загрузки самого видеофайла.
preload Все мобильные браузеры игнорируют предварительную загрузку. Сообщает браузеру, что до начала воспроизведения необходимо предварительно загрузить метаданные (или какое-либо видео). Варианты значений: none, metadata и auto (вы найдете более подробную информацию в разделе `Предварительная загрузка`).
autoplay Не поддерживается на iPhone и устройствах Android, поддерживается во всех браузерах для ПК, Firefox и Opera для Android, а также на iPad. Автоматически начинает загрузку и воспроизведение (более подробную информацию вы найдете в разделе `Автовоспроизведение`).
loop Все браузеры Закольцовывает видео.
controls Все браузеры Отображает кнопки управления по умолчанию (воспроизведение, пауза и т. д.)

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

На ПК атрибут autoplay означает, что браузер должен немедленно начать загрузку и воспроизведение видео. На iOS и в Chrome для Android атрибут autoplay не работает. Пользователь должен нажать на экран для воспроизведения видео.

Даже в тех случаях, когда автовоспроизведение работает, вы должны тщательно оценить необходимость его подключения:

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

Параметры автовоспроизведения можно настроить в Android WebView с помощью WebSettings API. По умолчанию ставится значение true, однако приложение WebView может отключить его.

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

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

Значение Описание
none Пользователь может даже не смотреть видео; предварительная загрузка не требуется
metadata Метаданные (длительность, размер, текстовые треки) должны быть предварительно загружены с минимальной загрузкой видео.
auto Желательна немедленная загрузка всего видео целиком.

Атрибут preload работает по-разному на различных платформах. Например, Chrome буферизует 25 секунд видео на ПК, однако на iOS или Android не буферизует ничего. Это означает, что при воспроизведении видео на мобильном устройстве может возникнуть некоторая задержка, чего не может случиться на ПК. Более подробную информацию вы можете найти на тестовой странице Стива Судера.

JavaScript

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

Свойства

Свойство Описание
currentTime Устанавливает время начала воспроизведения в секундах.
volume Устанавливает уровень громкости воспроизведения видео.
muted Отключает звук при воспроизведении видео.
playbackRate Устанавливает скорость воспроизведения. 1 - нормальная скорость.
buffered Информация о том, какой объем видео буферизован и готов к воспроизведению (посмотрите пример).
currentSrc Адрес, по которому находится воспроизводимое видео.
videoWidth Ширина видео в пикселях (может отличаться от ширины элемента video).
videoHeight Высота видео в пикселях (может отличаться от высоты элемента video).

Свойства playbackRate (см. пример) и volume не поддерживаются на мобильных устройствах.

Методы

Метод Описание
load() Загрузить или перезагрузить источник видео, не начиная воспроизведение, например когда атрибут src элемента video изменен с помощью JavaScript.
play() Воспроизвести видео, начиная с текущей позиции.
pause() Приостановить воспроизведение видео в текущей позиции.
canPlayType('format') Определить, какие форматы поддерживаются (см. раздел `Уточните, какие форматы поддерживаются`).

На мобильных платформах за исключением Opera для Android методы play() и pause() работают только в том случае, если они вызваны в ответ на действие пользователя, например нажатие кнопки (см. пример). Точно так же не может быть инициировано воспроизведение такого контента, как встроенные видео YouTube.

События

Ниже описана только те медиасобытия, которые могут быть инициированы. Полный список медиасобытий вы найдете на этой странице Mozilla Developer Network.

Событие Описание
canplaythrough Инициируется, когда доступен достаточный объем данных, чтобы браузер мог воспроизвести видео целиком без остановок.
ended Инициируется, когда воспроизведение видео закончено.
error Инициируется, когда произошла ошибка.
playing Инициируется, когда видео воспроизводится в первый раз, после паузы или после перезапуска.
progress Периодически инициируется для обозначения прогресса процесса загрузки.
waiting Инициируется, когда действие отложено в ожидании завершения иного действия.
loadedmetadata Инициируется, когда браузер завершил загрузку метаданных видео: длительности, размеров и текстовых треков.