Вы правильно подготовили видеофайл для веб-сайта. Вы указали правильные размеры и разрешение. Вы даже создали отдельные файлы 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 может повлиять на производительность, если имеется несколько источников с неподдерживаемыми типами.
Есть несколько способов углубиться в детали. Ознакомьтесь с руководством «A Digital Media Primer for Geeks», чтобы узнать больше о том, как видео и аудио работают в интернете. Вы также можете использовать удаленную отладку в 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 , вам нужно связаться со своим хостинг-провайдером.
Включите изображение плаката.
Добавьте атрибут "постер" к элементу video , чтобы зрители сразу после загрузки элемента имели представление о содержании, без необходимости скачивать видео или начинать воспроизведение.
<video poster="poster.jpg" ...>
…
</video>
Плакат также может служить запасным вариантом, если src видео неисправен или если ни один из предоставленных видеоформатов не поддерживается. Единственный недостаток изображений-плакатов — это дополнительный запрос файла, который потребляет некоторую пропускную способность и требует рендеринга. Для получения дополнительной информации см. раздел «Эффективное кодирование изображений» .
Убедитесь, что видеофайлы не выходят за пределы контейнеров.
Если видеоэлементы слишком велики для области просмотра, они могут выходить за пределы контейнера, что делает невозможным для пользователя просмотр контента или использование элементов управления.
Вы можете управлять размерами видео с помощью CSS. Если CSS не удовлетворяет всем вашим потребностям, могут помочь библиотеки и плагины JavaScript, такие как FitVids , даже для видео с YouTube и других источников. К сожалению, эти ресурсы могут увеличить размер передаваемых по сети данных , что негативно скажется на ваших доходах и кошельках ваших пользователей.
Для простых случаев, подобных описанным здесь, используйте медиа-запросы CSS , чтобы задать размер элементов в зависимости от размеров области просмотра; параметр ` max-width: 100% вам в этом поможет.
Для медиаконтента, размещенного во фреймах (например, видео на 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 переключение между портретной и альбомной ориентацией работает хорошо:
Ориентация устройства на iPad и в Chrome на Android может быть проблематичной. Например, без каких-либо настроек видео, воспроизводимое на iPad в альбомной ориентации, выглядит так:
Установка width: 100% или max-width: 100% с помощью CSS может решить многие проблемы с ориентацией экрана на разных устройствах.
Автовоспроизведение
Атрибут autoplay определяет, будет ли браузер немедленно загружать и воспроизводить видео. Точный принцип его работы зависит от платформы и браузера.
Chrome: Зависит от множества факторов, включая, помимо прочего, использование настольной версии сайта и добавление вашего сайта или приложения на главный экран мобильного пользователя. Подробнее см. раздел «Рекомендации по автовоспроизведению» .
Firefox: блокирует все видео и звуковые файлы, но предоставляет пользователям возможность ослабить эти ограничения либо для всех сайтов, либо для отдельных сайтов. Подробнее см. раздел «Разрешить или заблокировать автовоспроизведение мультимедиа в Firefox».
Safari: Исторически требовал от пользователя жеста, но в последних версиях это требование смягчилось. Подробнее см. Новые <видео> правила для iOS .
Даже на платформах, где доступна функция автовоспроизведения, необходимо обдумать, стоит ли её включать:
- Использование данных может быть дорогостоящим.
- Воспроизведение медиафайлов раньше, чем этого хочет пользователь, может привести к чрезмерному потреблению пропускной способности и ресурсов процессора, что, в свою очередь, замедлит отрисовку страницы.
- Пользователи могут находиться в ситуации, когда воспроизведение видео или аудио воспринимается как отвлекающий фактор.
Предварительная загрузка
Атрибут preload указывает браузеру, какой объем информации или контента следует предварительно загрузить.
| Ценить | Описание |
|---|---|
none | Пользователь может решить не смотреть видео, поэтому не загружайте ничего предварительно. |
metadata | Метаданные (длительность, размеры, текстовые дорожки) должны быть предварительно загружены, но с минимальным количеством видео. |
auto | Желательно загрузить весь видеоролик сразу. Пустая строка даст тот же результат. |
Атрибут preload оказывает различное воздействие на разных платформах. Например, Chrome буферизует 25 секунд видео на настольных компьютерах, но не делает этого на iOS или Android. Это означает, что на мобильных устройствах могут возникать задержки при запуске воспроизведения, которых нет на настольных компьютерах. Подробнее см. раздел «Быстрое воспроизведение с предварительной загрузкой аудио и видео» или блог Стива Саудерса .
Теперь, когда вы знаете, как добавлять медиафайлы на свою веб-страницу, пришло время узнать о доступности медиаконтента , где вы сможете добавить субтитры к видео для людей с нарушениями слуха или в тех случаях, когда воспроизведение звука невозможно.