Теги <video> и <source>

Derek Herman
Derek Herman
X GitHub
Joe Medley
Joe Medley
GitHub
Sam Dutton

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

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

Укажите один файл

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

<video src="chrome.webm" type="video/webm">
    <p>Your browser cannot play the provided video file.</p>
</video>

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

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

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

<video controls>
  <source src="chrome.webm" type="video/webm">
  <source src="chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.</p>
</video>

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

У этого подхода есть несколько преимуществ по сравнению с использованием разных HTML-кодов или серверных скриптов, особенно на мобильных устройствах:

  • Вы можете указать форматы в порядке предпочтения.
  • Клиентское переключение сокращает задержку; для получения контента отправляется только один запрос.
  • Предоставить выбор формата браузеру проще, быстрее и, возможно, надежнее, чем использовать базу данных поддержки на стороне сервера с обнаружением агента пользователя.
  • Указание типа каждого источника файла повышает производительность сети; браузер может выбрать источник видео без необходимости загружать часть видео, чтобы "проверить" формат.

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

Есть несколько способов получить подробные сведения. Чтобы узнать больше о том, как видео и аудио работают в интернете, ознакомьтесь с руководством по цифровым медиа для гиков. Вы также можете использовать удаленную отладку в DevTools, чтобы сравнить сетевую активность с атрибутами типа и без них.

Как отметить часть песни для тизера

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

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

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

Вы также можете указать время в <hours>:<minutes>:<seconds>. Например, #t=00:01:05 – видео начнется с 1 минуты 5 секунд. Чтобы воспроизвести только первую минуту видео, укажите #t=,00:01:00.

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

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

К счастью, это можно сделать в инструментах разработчика в браузере. Например, в Chrome он находится на панели "Сеть". Найдите заголовок Accept-Ranges и убедитесь, что в нем указано bytes. На изображении я обвел этот заголовок красной рамкой. Если вы не видите значение bytes, обратитесь к своему хостинг-провайдеру.

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

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

Добавьте атрибут poster в элемент video, чтобы зрители могли получить представление о контенте сразу после загрузки элемента, не скачивая видео и не запуская воспроизведение.

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

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

Не следует делать
Предварительный просмотр видео без значка.
Без резервного постера видео выглядит неработающим.
Что следует делать
Предварительный просмотр видео со значком.
Резервный постер создает впечатление, что первый кадр был захвачен.

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

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

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

Размеры видео можно задавать с помощью CSS. Если CSS не отвечает всем вашим требованиям, можно использовать библиотеки JavaScript и плагины, например FitVids, в том числе для видео с 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>

Попробовать

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

Положение устройства

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

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

Скриншот видео, которое воспроизводится в Safari на iPhone в вертикальном режиме.
Скриншот видео, которое воспроизводится в Safari на iPhone в горизонтальном и полноэкранном режимах.

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

Страница предварительного просмотра, на которой перечислены характеристики видео и воспроизводится видео в исходном разрешении без масштабирования.
Скриншот видео, воспроизводимого в Safari на iPad в горизонтальной ориентации.

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

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

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

Даже на платформах, где автовоспроизведение возможно, нужно подумать, стоит ли его включать.

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

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

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

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

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

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