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

В этой главе мы продемонстрируем несколько способов встраивания видео на веб-страницах, от новейшего 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>

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.