Встраивание аудиовизуального контента на вашу страницу — это отличный способ привлечь внимание к вашему сайту, причем не только эффективный способ привлечь и развлечь посетителей, но и привлекательность мультимедийного контента, который признается и используется в качестве фактора ранжирования всеми основными поисковыми системами. Видео, в частности, позволяет операторам веб-сайтов создавать разнообразные и информативные впечатления для своих посетителей. Кроме того, продукты и услуги могут быть представлены более подробно с помощью видео, чем с помощью текстов и изображений. Однако размещение выбранного видео на вашем сайте может занять много времени и быть сложным. Для просмотра мультимедийного контента клиентам необходимо, чтобы на их устройстве была вручную установлена самая современная версия соответствующего плагина для браузера; это часто может привести к несовместимости и проблемам с безопасностью. Операторы веб-сайтов также сталкиваются со сложными кодами встраивания, которые иногда создают трудности при конвертации видео в нужный формат (например, SWF). Однако вскоре все это может остаться в прошлом: с выходом пятой версии язык разметки гипертекста (более известный как HTML) представил собственный элемент, который может интегрировать видео в код сайта как полноценный веб-контент. Кроме того, видео можно встраивать с помощью Vimeo, YouTube и других онлайн-видеохостингов. Читайте дальше, чтобы узнать, как это сделать.
Сделать вставку видео простой с помощью HTML5
С HTML5 встраивание видео на ваш сайт — это детская забава. Вам понадобится только родной элемент video, который можно расширить с помощью дополнительных атрибутов. Следующий пример показывает, как можно добавить видеоресурсы в исходный код вашего сайта:
<video src="example.mp4" width=320 height=240 controls poster="thumbnail.jpg">
This video cannot be played in your current browser.<br>
View the download version at <a href="URL">Link address</a>.
</video>Элемент video, который мы здесь показали, содержит URL-адрес видеоресурса (src=»example.mp4″), а также дополнительные атрибуты: width, height, controls и poster, которые определяют, как именно видео должно отображаться на сайте. Текст, который появляется между первым и последним тегами элемента, будет показан только в том случае, если браузер не может отобразить видео. Операторы веб-сайтов обычно используют эти функции, чтобы дать альтернативное описание или ссылку на скачивание ресурса.
Элемент HTML5 video: необязательные атрибуты
Если ресурс встроен в видеоэлемент, то ссылка на него должна быть включена либо в атрибут src, либо во вложенный элемент source. Элемент video может быть расширен следующими атрибутами:
| Атрибут | Функция |
|---|---|
| ширина/высота | Атрибуты width и height позволяют операторам сайта явно определить размеры своего видео. Если размер не указан, элемент видео использует информацию, содержащуюся в видеоданных. Если вы просто используете один из двух атрибутов, браузер автоматически отрегулирует соотношение сторон. |
| элементы управления | Вы можете активировать встроенную панель управления веб-браузера с помощью атрибута controls. В качестве альтернативы используйте JavaScript для определения собственных элементов управления. |
| плакат | Атрибут poster указывает на графический файл, который будет использоваться в качестве миниатюры видео. Если этот атрибут не указан, для предварительного просмотра используется первый кадр видео. |
| autoplay | Атрибут autoplay указывает веб-браузеру, что видео должно начать воспроизводиться автоматически при загрузке страницы. |
| loop | Используйте атрибут loop для воспроизведения видео в непрерывном цикле. |
| отключить звук | С помощью атрибута muted можно отключить звук видео. |
| preload | Атрибут preload указывает браузеру, как должен быть предварительно загружен видеофайл. Здесь можно определить три значения: при стандартном значении auto обычно загружается весь файл, тогда как видеоэлемент со значением preload, metadata, загружает только метаданные, а значение none предотвращает предварительную загрузку видеоданных. |
Браузер без поддержки HTML5
Новейшие версии наиболее распространенных веб-браузеров поддерживают HTML5. Однако вы также можете использовать текстовые ссылки внутри элемента видео. Они появляются в альтернативном тексте и направляют пользователей на отдельный файл загрузки видео, что делает контент доступным для пользователей, не имеющих самого современного программного обеспечения. Такие пользователи могут загрузить файл и посмотреть видео на локальном медиаплеере.
Кодеки HTML5 в состоянии хаоса
Спецификация HTML5 определяет элемент видео и соответствующий интерфейс прикладного программирования (API), однако она не содержит спецификаций для кодирования видео. Поэтому при выборе формата видео возникают проблемы. Все распространенные видеоформаты, включая WebM, OggTheora и H.264/MPEG4, имеют свои преимущества и недостатки. Из-за этого ведущие веб-браузеры до сих пор не пришли к единому стандарту. Internet Explorer и Safari в основном используют формат H.264/MPEG4, который является платным для производителя. Этот формат доступен практически везде с 2013 года. Однако Firefox, Chrome и Opera поддерживают свободные форматы, такие как Ogg Theora и WebM.
| Браузер | MP4 (файлы MPEG4 с видеокодеком H.264 + аудиокодек AAC) | WebM (файлы WebM с видеокодеком VP8/VP9 + аудиокодек Vorbis) | Ogg (файлы Ogg с видеокодеком Theora + аудиокодек Vorbis) |
|---|---|---|---|
| IE 9+ | Да | Нет | Нет |
| Firefox | Да | Да | Да |
| Chrome | Да | Да | Да |
| Safari | Да | Нет | Нет |
| Opera | Да | Да | Да |
Во избежание несовместимости видеороликов целесообразно предоставлять их в различных форматах. С этой целью элемент video позволяет встраивать различные видеоресурсы через подэлемент source и помечать их атрибутом type для веб-браузера:
<video width=320 height=240 controls poster="thumbnail.jpg">
<source src="example.webm" type="video/webm">
<source src="example.ogg" type="video/ogg">
<source src="example.mp4" type="video/mp4">
</video>Если в элемент video встроен альтернативный элемент source с соответствующим атрибутом typ, то при загрузке веб-страницы браузер автоматически выберет предпочтительный формат видео. Имейте в виду, что при выборе этого метода элемент video не может содержать атрибут src с ресурсами.
Встраивание аудиовизуального контента с помощью видеоплатформ
Если вы предпочитаете передать задачу размещения видео внешнему поставщику услуг, а не размещать видео на своем собственном сервере, можно встраивать видео через Vimeo, YouTube и другие подобные платформы видеохостинга. Эти сайты позволяют пользователям загружать собственные видеоролики и генерировать код для встраивания, чтобы интегрировать ролики в свой сайт.
Популярные видеоплатформы гарантируют совместимость вашего контента с текущими версиями основных веб-браузеров, что означает, что большинство устройств поддерживают эти форматы. Еще одним преимуществом аутсорсинга видеоклипов является то, что сервер не перегружается потоковой передачей. Однако операторам сайтов важно ознакомиться с условиями использования платформы видеохостинга и привести код встраивания в соответствие со стандартами своего сайта.
Например, если вы хотите вставить видео с YouTube, вам нужно зайти на видео на платформе и взять код из меню встраивания. Вы также можете настроить основные параметры, включая определение размеров видео, активацию элементов управления и изменение названия видео. Чтобы предотвратить появление нежелательного контента на вашей странице, следует отключить функцию предлагаемого видео для рекомендуемых видео. Если этого не сделать, во встроенном проигрывателе будет воспроизводиться другое видео со связанными ключевыми словами; в худшем случае это может быть видео прямого конкурента.
- Создание веб-сайта