Вставка видео на веб-страницу была относительно непростой задачей, поскольку веб-браузеры не имели единого стандарта для определения встроенных медиа-файлов.
В этой главе мы продемонстрируем несколько способов встраивания видео на веб-страницах, от новейшего HTML5-элемента <video> до популярных видео-хостингов типа YouTube.
Использование тега <video> для встраивания video
Недавно введенный HTML5-элемент <video> обеспечивает стандартный способ встраивания видео в веб-страницы. Элемент <video> является относительно новым, но он работает в большинстве современных веб-браузеров.
В следующем примере просто вставляется видео в HTML-документ с использованием набора элементов управления браузера по умолчанию с одним источником, определенным атрибутом src.
<video controls="controls" src="media/shuttle.mp4">
Your browser does not support the HTML5 Video element.
</video>Видео с использованием набора элементов управления по умолчанию в браузере с альтернативными источниками.
<video controls="controls">
<source src="media/shuttle.mp4" type="video/mp4">
<source src="media/shuttle.ogv" type="video/ogg">
Your browser does not support the HTML5 Video element.
</video>Использование тега <object> для встраивания video
Элемент <object> используется для встраивания различных типов медиафайлов в HTML-документы. Первоначально этот элемент использовался для вставки элементов управления ActiveX, но в соответствии со спецификацией, объектом может быть любой медиа-объект, такой как аудио, видео, PDF-файл, Flash-анимация и даже изображения.
Следующий фрагмент кода встраивает Flash-видео в веб-страницу.
<object data="media/blur.swf" width="400px" height="200px"></object>Воспроизвести это видео могут только браузеры или приложения, поддерживающие Flash.
Элемент <object> не везде поддерживается и очень зависит от типа внедряемого объекта. Во многих случаях другие методы могут быть лучшим выбором. Устройства iPad и iPhone не могут отображать Flash-видео.
Использование тега <embed> для встраивания video
Элемент <embed> используется для встраивания мультимедийного контента в HTML-документ.
Следующий фрагмент кода встраивает Flash-видео в веб-страницу.
<embed src="media/blur.swf" width="400px" height="200px">Элемент <embed> очень хорошо поддерживается в современных веб-браузерах, и он также определен как стандартный в HTML5, но ваше видео может не воспроизводиться из-за отсутствия поддержки Flash в браузере или из-за отсутствия плагинов.
Встраивание видео с YouTube
Это самый простой и популярный способ встраивания видеофайлов в веб-страницы. Просто загрузите видео на YouTube и вставьте HTML-код, чтобы отобразить это видео на своей веб-странице.
Вот живой пример, сопровождаемый объяснением всего процесса:
Шаг 1: Загрузить видео
Перейдите на страницу с нужным видео на YouTube и следуйте инструкциям по загрузке видео.
Шаг 2. Создание HTML-кода для встраивания видео
Когда вы откроете загруженное видео на YouTube, вы увидите что-то вроде следующего рисунка внизу видео. Теперь найдите кнопку «Поделиться», которая расположена чуть ниже видео, как показано на рисунке.
Когда вы нажмете кнопку «Поделиться», откроется панель «Общий доступ», отображающая еще несколько кнопок. Теперь нажмите кнопку «Встроить», YouTube сгенерирует HTML-код для непосредственного встраивания видео в веб-страницы. Просто скопируйте и вставьте этот код в ваш HTML-документ, где вы хотите показать видео, и все готово. По умолчанию видео встраивается как iframe.
Вы можете дополнительно настроить этот код для встраивания, например, изменить размер видео, выбрав параметр настройки, указанный чуть ниже поля ввода кода встраивания.
В следующем примере просто вставляется видео с YouTube:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>YouTube Video</title>
</head>
<body>
<iframe width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
</body>
</html>
