Вставка html5 видео – Можно ли в Html5 с помощью тега video запускать потоковое видео? — Хабр Q&A — Вебджем.рф

Содержание

Работа с видео в HTML5.

Всем привет! Сегодня мы подробно поговорим о такой мультимедийной возможности HTML5 как воспроизведение видео.

Для того, чтобы вставить видео на сайт, используется тег video.

<video src="path/to/video/file.mp4"></video>

У данного тега есть атрибут src, в который мы должны прописать путь до нашего видеоролика.

Если вы сейчас откроете страницу в браузере, то увидите картинку(постер), однако, больше ничего не будет. Вы никак не сможете взаимодействовать с видео.(Google Chrome).

Чтобы мы смогли увидеть элементы управления, такие, как шкала времени, воспроизведение/пауза, управление громкостью и полноэкранный режим, существует атрибут controls.

<video src="video.mp4" controls></video>

Если вам нужно, чтобы видео воспроизводилось сразу при загрузке страницы, используйте атрибут

autoplay.

<video src="video.mp4" controls autoplay></video>

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

<video src="video.mp4" controls autoplay loop></video>

Есть еще такой интересный атрибут как preload. Как понятно из названия, он отвечает за предзагрузку видео. У него 3 значения:

none — означает, что никакой предзагрузки не будет. Не будет вообще никакой информации, даже такой, как длительность, уровень громкости и т.д.
metadata — это значение, наоборот, покажет нам ту информацию, которую не покажет значение none
auto — подгружает видео сразу после загрузки страницы, чтобы человек мог его сразу запустить и не ждать, пока оно загрузится. Что-то вроде полоски на
YouTube, но тут она не отображается

Понятно, что если у вас стоят сразу 2 атрибута — preload и autoplay, то весь смысл атрибута preload пропадает.

<video src="video.mp4" controls preload="auto"></video>

Конечно же, у данного тега есть такие атрибуты как width и height, которые отвечают за ширину и высоту видео.

<video src="video.mp4" controls autoplay widht="500"></video>

При помощи атрибута poster вы можете выставить свою картинку, которая будет показываться до того, как вы воспроизведете видео.

<video src="video.mp4" controls poster="poster.png"></video>

Для того, чтобы выключить звук у видео, существует атрибут muted.

<video src="video.mp4" controls autoplay muted></video>

Также, в html5 video есть возможность указать промежуток времени, с которого начнется просмотр и когда он закончится. Для этого достаточно указать #t= после имени видеофайла и указать время начала и конца через запятую.

<video src="video.mp4#t=3,5" controls></video>

В примере выше мы указали, что видео должно начаться с 3 секунды и закончиться на 5.

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

<video src="video.mp4#t=3" controls autoplay></video>

В примере выше видео будет начинаться с 3 секунды и идти до конца.

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

<video src="video.mp4#t=,5" controls></video>

В примере выше видео начнется с самого начала и будет идти до 5-ой секунды.

Возможность встраивать видео в html появилась недавно и понятно, что старые браузеры не поддерживают данной возможности. Чтобы это исправить, мы можем написать им какой-то текст между тегами <video></video>

<video src="video.mp4" controls>

  К сожалению, ваш браузер не поддерживает HTML5 Video.

</video>

Или вы можете встроить сюда какой-то другой плеер, например, на flash или javascript, и тогда видео смогут просмотреть даже пользователи старых браузеров.

Каждый современный браузер поддерживает свой формат видео, а старые браузеры имеют поддержку еще хуже. Чтобы поддерживать несколько форматов видео, существует тег source.

<video controls autoplay>

  <source src="video.mp4"></source>

  <source src="video.ogv"></source>
 
</video>

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

У тега source есть атрибут type, в котором мы указываем MIME тип и кодеки.

<video controls autoplay>

  <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>

  <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'></source>

</video>

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

Итак, на этом все. Это все, что можно и нужно знать про HTML5 Video. Спасибо за внимание и удачи!

Создано 22.08.2014 20:40:25
Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Учебник HTML 5. Статья «Размещение видео с видео хостинга YouTube»

Тяжело представить себе современный интернет без самого популярного видео хостинга YouTube, который по данным сайта alexa.com на конец 2016 года явлется вторым сайтом в мире по количеству посетителей! Речь в этой статье пойдет о том как с использованием языка HTML добавить видео контент c этого знаменитого видео хостинга на Ваши страницы.

Встраивание проигрывателя во фрейм

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

Если вы хотите использовать на сайте ваше видео, то необходимо его предварительно загрузить на YouTube, для этого необходимо иметь аккаунт Google и провести минимальные настройки своего канала (будем считать что этот шаг Вами пройден).
Запишите ID видео (последние символы в адресной строке ?v=VIDEO_ID
).
Определите размеры <iframe> элемента на вашей веб-странице (атрибуты width и height). Хочу сразу подчеркнуть, что встраивать проигрыватель с помощью элемента <iframe> является лучшей практикой, таким образом вы предоставите пользователю оптимальные условия просмотра вне зависимости от типа его устройства или формата воспроизводимого файла). Если вы пропустили тему, посвященную фреймам в HTML, то рекомендую Вам к ней вернуться для изучения.

Примечание из официальной документации

200

16:9

480

270

Добавьте путь к видео, используя атрибут src и записанный ранее ID необходимого видео (https://www.youtube.com/embed/VIDEO_ID). Справочно: Раньше региональные блокировки видео можно было обходить тем, что вместо /embed/ можно было указать /v/.

Давайте рассмотрим пример добавления видео с YouTube:

<!DOCTYPE html>
<html>
	<head>
		<title>Размещение видео с YouTube</title>
	</head>
	<body>
		<p>Размещение видео с YouTube</p>
		<iframe  width = "320" height = "240" src = "https://www.youtube.com/embed/d9TpRfDdyU0?autoplay=1?loop=1&start=28&color=white">
		</iframe>
	</body>
</html>

В этом примере элементом <iframe> мы разместили фрейм на странице и задали для него ширину 320 пикселей (атрибут width) и высоту 240 пикселей (height). В атрибуте src мы указали путь к странице с видео, указали ID видео (выделен курсивом) и добавили дополнительные параметры плеера YouTube (подробное описание доступно в официальной документации):

autoplay = «1» (видео автоматически запускается).
loop = «1» (проигрыватель будет воспроизводить видео по кругу, в бесконечном цикле).
start = «28» (определяет с какой секунды начнется воспроизведение видео, значение должно быть положительным целым числом).
color = «white» (бегунок просмотренного отмеряет белым цветом, по умолчанию — красным).

Результат нашего примера:

Рис. 52 Добавление видео с YouTube во фрейм.

Есть еще один способ, который позволяет формировать HTML код для размещения плеера YouTube с интересующим нас видео. Для этого необходимо найти на YouTube это видео, пролистать под описание к видео, найти и нажать на кнопку «Поделиться». После этого нам будет доступно меню в котором необходимо выбрать вкладку «HTML-код». У нас есть два варианта: сразу скопировать готовый код сформированный по умолчанию, либо нажать на вкладку «Еще»

и провести более расширенную настройку:

Рис. 53 Настройка фрейма на сайте YouTube.

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

Обратите внимание, что YouTube добавляет такие атрибуты как frameboarder, который отвечает за наличие, либо отсутствие рамки вокруг фрейма и атрибут allowfullscreen, который позволяет перевести плеер в полноэкранный режим. Обращаю ваше внимание, что этих атрибутов нет в спецификации HTML 5, не смотря на это атрибут frameboarder убирает границы фрейма, но при валидации документа быдет указана ошибка. В HTML 5 рекомендуется границы элемента добавлять, либо убирать средствами CSS, подробно об этом мы изучим в учебнике CSS в статье «Границы элемента в CSS».

Встраивание проигрывателя на страницу

Давайте рассмотрим следующий способ добавления видео с YouTube на страницы, но в этот раз мы будум добавлять видео не во фрейм, а на саму страницу. Для этого нам необходимо использовать HTML тег <object> или <embed>.

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

Элемент <object> — это универсальный способ внедрения в страницу мультимедийного контента — видео, flash-роликов, апплетов, изображений и даже веб-страниц. Он может содержать несколько элементов <param>, которые используются, чтобы определить параметры для плагинов, встроенных в элемент <object>.

Внутри элемента <object> также можно поместить резервный контент, который отображается, если не поддерживается мультимедийный файл. Атрибуты и параметры меняются в зависимости от типа объекта и иногда уникальны для сторонних плагинов, отображающих мультимедийный контент.

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

Он не входил в стандарт HTML 4, но поддерживался браузерами, официальный статус он обрёл лишь в спецификации HTML 5. Спецификация HTML 4.0 рекомендовала использовать тег <object> для загрузки внешних файлов, поэтому веб-мастера помещали тег <embed> внутрь тега элемент <object>, который применялся в качестве запасного варианта в элементе <object>, чтобы обеспечить поддержку более широкого круга браузеров и обеспечить валидность документа. В HTML 5 такой необходимоcти нет (элемент проходит валидацию).

Давайте рассмотрим пример их использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тегов <object> и <embed></title>
	</head>
	<body>
		<p>Размещение видео с YouTube</p>
		<!--внедряем в страницу видео с использованием парного тега <object>-->
		<object width = "320" height = "240" data = "https://www.youtube.com/embed/d9TpRfDdyU0">
		</object>
		<!--внедряем в страницу видео с использованием тега <embed>-->
		<embed  width = "320" height = "240" src = "https://www.youtube.com/embed/d9TpRfDdyU0">
	</body>
</html>

В этом примере мы разместили видео с видео хостинга YouTube с использованием тега <object> и <embed>. Ширину и высоту видео задали с использовнием атрибутов width и height. Обратите внимание, что тег <object> парный и путь к видео необходимо указывать атрибутом data, a тег <embed> имеет синтаксис схожий с размещением обычного изображения (тег <img>) — использует атрибут src и не требует закрывающего тега.

Результат нашего примера:

Рис. 54 Размещение видео на странице с использованием тегов <object> и <embed>.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

Используя полученные знания составьте следующую страницу:

Практическое задание № 27.

Подсказки:

Чтобы получить значение цвета, который использует YouTube вы можете сделать PrintScreen экрана и в графическом редакторе, используя инструмент палитра (пипетка) получить значения цвета. Например, в Paint можно получить значение цвета в системе RGB. Как задавать цвета в системе RGB вы можете повторить в статье учебника «HTML Цвета». Кроме того, для этих целей существует множество плагинов для браузера.
Укажите для боковой панели значение ширины равной 50% это позволит Вам получить два одинаковых блока с видео клипами и сделать наш пример адаптивным.
Для выполнения задания Вам потребуются знания из статьи учебника «Теги разметки страницы».

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

Как создать видеоплеер на HTML5 с нуля

Сегодня мы заглянем за кулисы HTML5, и вы узнаете, как разработать плеер для сайта с нуля. Цель этого урока заключается в том, чтобы объяснить код таким образом, чтобы любой мог создать свой собственный видеоплеер:

Перед началом проекта нужно подготовить исходные материалы. Вам понадобятся:

Пустой html документ;
Два видеоролика (вы можете загрузить примеры видеороликов с бесплатных онлайн-источников, таких как PixaBay.com или Videezy.com). Убедитесь, что они оба формата .mp4;
Обложка (изображение для презентации видео). Для этого можно скачать соответствующее изображение с Pexels.com или FreeImages.com;
Иконки для управления плеером (можно воспользоваться такими сайтами, как FlatIcon.com или IconArchive.com).

Результат должен выглядеть примерно так:

В своем уроке я буду использовать:

Изображение Белка;
Архив контурных медиа кнопок;
Шрифт Awesome стилизованный под видеоплеер;
Бесплатный редактор кода Brackets, меня привлекла в нем удобная кнопка «Live Preview» (Предварительный просмотр), расположенная в правом верхнем углу, которая показывает результат работы на веб-странице после того, как вы сохранили отредактированный html-файл.

Теперь, когда мы выбрали и собрали все необходимые материалы, можно приступить к работе над кодом плеера для сайта HTML5.

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

Начнем с разметки HTML, в ней используется универсальное объявление doctype <! DOCTYPE html>. Это первое, с чего начинается любой HTML-документ. Оно нужно для того, чтобы браузер был в курсе, какой документ вы используете.

Теперь перейдем к элементам, которые нужно включить в HTML: <head> и <body>. Сейчас мы должны сосредоточиться на том, что происходит в body. Вы не сможете создать видео без тега <video>. Внутри <head> вставляем <video>.

Теперь в теге <video> нужно указать, какие размеры должен иметь плеер (рекомендуется установить размеры плеера, чтобы избежать мерцания). Источник видео, которое вы хотите воспроизвести в плеере, и изображение обложки. Это будет презентацией видео, которое зрители увидят, прежде чем нажмут кнопку «Play».

Теперь рассмотрим доступные атрибуты и посмотрим, как они работают.

Атрибут poster — он нужен для создания изображения-презентации вашего видео. В нем необходимо указать папку с изображением (в данном случае «Images») и название файла. Затем нужно выбрать ширину и высоту плеера. Я решил выбрать симметричную форму.

Чтобы собрать плеер для сайта, важно вставить атрибут «controls». Без него вы можете управлять своим видео только правой кнопкой мыши, а затем выбрать «Воспроизвести» или другие основные функции. Тег <controls> отображает основной массив элементов управления: кнопки «Воспроизвести», «Пауза», «Громкость» и кнопку полноэкранного режима для более удобного использования функций.

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

Поскольку тег <video> поддерживает три формата видео (MP4, WebM и Ogg) необходимо указать в атрибуте type, какой из них используется. Для удобства пользователей рекомендуется использовать как можно больше версий видео. Поэтому, если у вас есть .ogg-версия видео, нужно открыть еще один тег <source>. Например: <source src = «videoexample.ogg» type = video / ogg>.

Теперь, если вы нажмете кнопку «Video Preview» (Предварительный просмотр видео), то увидите базовый видеоплеер с обложкой, кнопками управления и видео, которое корректно воспроизводится в пределах выбранного размера.

Создаваемый плеер для сайта будет находиться в <div>, который в свою очередь будет содержать два других <div>:

Затем мы собираемся построить площадку для CSS-кода. Для этого я создал три идентификатора внутри большого тега div с именем video-player, поскольку — это цель нашего проекта.

Первый div-контейнер отвечает за скелет видео. Сюда нужно перенести первоначальные строки тега <video>, который мы создали на втором этапе данного руководства. Второй div-контейнер содержит индикатор просмотра, а третий — кнопки видеоплеера. Помните, что каждый тег <div> должен иметь уникальный идентификатор:

Далее я задаю каждому <div> необходимые атрибуты. Таким образом, у div video-tree есть video теги.

<Div> progress-tree отвечает за индикатор выполнения, поэтому имеет идентификатор «progress».

<Div> button-tree требует больше вашего внимания. Я вставил три кнопки: play (воспроизвести), back (назад) и next (вперед). Таким образом, каждая кнопка заключена в свой собственный тег <div>, имеет собственный идентификатор («play-button», «backward-button» и «forward-button») и размеры (100 на 100 пикселей для каждой кнопки).

У кнопки воспроизведения есть своя временная шкала, которую я вставил в <div> с идентификатором «time-factor». Не забудьте также использовать ограничения времени «0: 00/0: 00», которые представляют собой время начала и момент времени, которого достигло видео.

После всего этого ваш «Live Preview» (Предварительный просмотр) должен выглядеть так:

Как видите, кнопки плеера с плейлистом для сайта находятся в неправильном порядке, но мы исправим это с помощью CSS.

Сохраните файл html и откройте новый файл с именем «video-player.css». Не забудьте сохранить файл css в той же папке, где html.

Теперь вернитесь в файл html и добавьте в тег <head> атрибуты, которые свяжут файл html с css-файлом: <link rel = «stylesheet» type = «text / CSS» href = «video -player.css»>.

Независимо от структуры, которую вы хотите использовать в файле css, просто указываете элемент с id, который отметили в html-файле, указав в начале #. Так вы сообщите редактору кода, какую часть необходимо стилизовать первой:

Выше показан скриншот файла css. Я показал основной CSS, но с помощью этого языка можно сконструировать видеоплеер более сложными способами. Когда понятны основы, можно исследовать более сложные стили самостоятельно.

Я последовательно настроил все элементы создаваемого плеера в файле css.

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

У видеоплеера синий фон, он ограничен размерами дисплея плеера, так как функция display имеет значение inline-block. Поэтому веб-страница не станет полностью синей, так как синий фон будет ограничен размерами видеоплеера.

Следующий элемент проектирования — это video-tree, для которого я выбрал нужные размеры, и указал, чтобы видео выводилось на весь экран.

Для progress-tree я выбрал только цвет, и больше сосредоточился на ветке «progress», определяющей индикатор просмотра. Вам нужно выбрать для прогресс-бара цвет отличный от progress-tree, чтобы пользователи могли видеть, сколько осталось видео.

Для button-tree я создал две разные записи. Первая запись фокусируется только на ширине кнопок. Вторая запись управляет кнопками при горизонтальной перестройке с помощью команды «display: inline-block» и центрируется атрибутом «vertical-align: middle».

Этот CSS позволяет настроить плеер для сайта на ваше усмотрение.

На этом этапе вы должны снова сохранить проект, создать новый файл и назвать его «video-player.js». Сохраните файл в той папке, которую используете для этого проекта.

Затем нужно связать файл JavaScript с исходным файлом HTML5 строкой между тегом <link> и закрывающим тегом <head>. Например: <script type = «text / javascript» src = «video-player.js»> </ script>:

В приведенных выше строках JavaScript-кода я сосредоточился только на кнопке воспроизведения.

Сначала мы вводим идентификатор элемента, с которым хотим работать в первую очередь. В нашем случае это идентификатор «play-button». Затем необходимо прописать форму кнопке через GetElementbyID.

Далее, когда зритель нажимает на кнопку воспроизведения, мы обрабатываем «Click» с помощью метода addEventListener. Функция «playOrPause» заставляет кнопку «Воспроизвести» работать, как обычную кнопку воспроизведения, а также как кнопку «Пауза».

Затем в коде создания плеера для сайта вы описываете функцию playOrPause. Если видео приостановлено, нажатие кнопки активирует воспроизведение. Если не приостановлено (блок «else»), нажатие кнопки «Воспроизвести» остановит воспроизведение.

Вы можете поделиться своим опытом и мыслями относительно создания видеопроигрывателя в комментариях!

Данная публикация представляет собой перевод статьи «How to Build an HTML5 Video Player from Scratch» , подготовленной дружной командой проекта Интернет-технологии.ру

Видео на сайт при помощи тегов html5

Добрый день! Сегодня хотел бы рассказать вам о том, как встроить видео на лендинг пейдж. Это один из способов визуализации товара, повышающий конверсию. Не всегда картинка с текстом работают лучше, чем видео. И в некоторых нишах лучше использовать именно видео презентацию товара или услуги. Кроме того, вы можете комбинировать и тестировать что работает лучше именно у вас.

Сегодня речь пойдет о способе подключения видео при помощи тегов html5. Это удобно в том случае, если у вас нет своего канала на youtube, а ролик отснят, находиться на компьютере и требуется его выложить на лендинг.

Как вставить видео на сайт при помощи тегов html5

В общем случае, для того чтобы встроить видео на сайт при помощи тега html5, достаточно одной строчки:

<video src="video/demo.mp4"> </video>

Но в таком случае могут возникнуть проблемы. Дело в том, что не все браузеры, пока, поддерживают абсолютно все форматы. И может возникнуть ситуация, что в одном из браузеров, видео не будет проигрываться.

Для того, чтобы это исправить необходимо сохранить видео в нескольких форматах и дописать несколько строчек кода. Наиболее популярные это: mp4, webm, ogg. Или даже не наиболее популярные, а те, которые позволяют осуществить максимальный охват. (Если будет интересна эта тема – пишите в комментариях, я сделаю обзор какой-нибудь программы для конвертирования видео)


<video poster="demo.jpg">
 <source src="video/demo.mp4" type="video/mp4" />
 <source src=" video/demo.webm" type="video/webm"/>
 <source src=" video/demo.ogv" type="video/ogg"/>
 Формат не поддерживается 
</video>

Таким образом, браузер пройдется по коду и выберет тот формат, который он может воспроизвести. Но это еще не все. Для того, чтобы сэкономить время, которое браузер тратит на поиск нужной строки (в которой находиться заветный формат) и попыток начать загрузку, мы указали атрибут “type”, в котором указан формат видео.

Дело в том, что браузер в первую очередь проверяет его. Атрибут “poster” – задает изображение, которое будет выводиться до начала воспроизведения.(Если быть точным, то до определения того формата, который может воспроизвести)

Но и это еще не все. Старые браузеры не поддерживают теги html5 (ну, или частично поддерживают). В таком случае нам необходимо подстраховаться и сказать браузеру, чтобы он пытался воспроизвести видео при помощи flash– плеера.


<video controls poster="demo.jpg">
<source src="demo.mp4" type="video/mp4" />
<source src="demo.webm" type="video/webm"/>
<source src="demo.ogv" type="video/ogg"/>
<object><embed src="demo.mp4" type= "application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="always" /></object>
Формат не поддерживается
</video>

Как вы могли заметить, я добавил атрибут «controls» — для того, чтобы появились элементы управления, такие как перемотка, пауза и т.д. А также тег <object>. Он говорит браузеру что нужно делать, если не один из форматов невозможно воспроизвести. В нашем случае — это попытка открыть видео во flash-плеере и, в случае неудачи, выдать сообщение о том, что формат не поддерживается.

Существуют и дополнительные атрибуты, которые можно задать тегу <video>. Вот основные из них:

autoplay — автоматическое начало воспроизведения видео.
height, width — высота и ширина.
preload — буферизация видео (предзагрузка как в ютубе)

А на сегодня — все. Теперь вы знаете, как добавить видео на сайт при помощи тегов html5. Скоро я расскажу вам, как встроить видео на сайт из Youtube. Пока!

Добавление видео на страницу при помощи HTML5

Тег <video> появился в HTML5, он позволяет добавлять и проигрывать видео на HTML-странице. Конечно, пока это будет работать только в некоторых браузерах: Safari 3,1 +, Firefox 3,5 +, и последние версии Оперы (и, возможно, в следующем выпуске Chrome).

«Старый» способ:

Брр, посмотрите этот ужасный код:

И как вы, надеюсь, знаете, у Вас должен быть установлен Flash-плеер для того, чтобы видео проигрывалось. Или это часто вставлялось с помощью JavaScript, а поэтому данный способ не является совершенным.

HTML5 способ:

Хороший, чистый, минимальный код:

<video src=»http://www.youtube.com/demo/google_main.mp4″ controls autobuffer>
<p> Try this page in Safari 4! Or you can <a href=»http://www.youtube.com/demo/google_main.mp4″>download the video</a> instead.</p>
</video>

Autoplay

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

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

Download

Если браузер не знает, что делать с тегом video, или, если есть ошибка отображения, вы можете предложить скачать видео вместо его просмотра:

Autobuffer

Атрибут autobuffer используется, когда функция автозапуска не используется. Видео загружается в фоновом режиме, поэтому, когда пользователь запускает видео, он сможет сразу же проиграть по крайней мере некоторую часть содержания. Если оба атрибута — автозапуск и автобуферизация используются, то автобуферизация игнорируется.

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

Poster

Используйте атрибут poster для отображения кадра видео (в формате. JPG,. PNG), в случае если видео не загружается по каким-либо причинам. Это могут быть локальные изображения или с другого веб-сайта.

<video src=»http://www.youtube.com/demo/google_main.mp» autobuffer controls poster=»whale.png»>
<p>Try this page in Safari 4! Or you can <a href=»http://www.youtube.com/demo/google_main.mp4″>download the video</a> instead.</p>
</video>

Вы должны использовать этот атрибут, если вы не хотите, чтобы пользователь ничего не увидел.

Controls

Добавление этого атрибута означает, что вы можете использовать свои собственные кнопки управления: воспроизведение / пауза / и т.д. для вашего видео. Safari имеет прекрасные кнопки по умолчанию, но вы можете создать свои собственные.

Текущие проблемы

Internet Explorer

Лидер рынка браузеров Internet Explorer не поддерживает на данный момент тег video, и это приходится учитывать при его использовании. Временным решением может быть сочетание старого способа вставки видео и нового, с помощью HTML5. Но код в таком случае выглядит ужасно:

Источник на англ. языке

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Добавление видео на веб-страницы Dreamweaver

В этом разделе описаны самые распространенные причины неполадок в файлах FLV.

Просмотр неполадок, связанных с отсутствием связанных файлов

Код, создаваемый Dreamweaver CS4 и более поздних версий, основан на четырех зависимых файлах, отличных от самого файла FLV:

swfobject_modified.js;
expressInstall.swf;
FLVPlayer_Progressive.swf;
файл обложки (например, Clear_Skin_1.swf).

Помните, что в отличие от Dreamweaver CS3, в Dreamweaver CS4 и более поздних версиях существует еще два зависимых файла.

Первые два файла (swfobject_modified.js и expressInstall.swf) устанавливаются в папку «Сценарии», которая создается Dreamweaver в корне сайта (если она уже не создана).

Вторые два файла (FLVPlayer_Progressive.swf и файл обложки) устанавливаются в ту же папку, что и страница, в которую встраивается файл FLV. Файл обложки содержит элементы управления FLV. Его имя зависит от обложки, которая указана в параметрах, описанных в справке по Dreamweaver. Например, если выбрать обложку «Clear Skin», файл будет назван Clear_Skin_1.swf.

Для корректного отображения FLV все четыре зависимых файла НЕОБХОДИМО загрузить на удаленный сервер.

Отсутствие этих файлов на сервере — самая распространенная причина того, что файлы FLV некорректно отображаются в веб-странице. Если один из этих файлов отсутствует, вместо требуемого содержимого страницы может отобразиться «белый прямоугольник».

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

Обнаружение неполадок при локальном предпросмотре страниц

В Dreamweaver CS4 есть новые ограничения, связанные с безопасностью: нельзя использовать команду «Просмотреть в браузере» для тестирования страницы со встроенными файлами FLV, если вы не определили локальный тестовый сервер в определении веб-сайта Dreamweaver и не используете для просмотра страницы этот тестовый сервер.

В предыдущих версиях тестовый сервер понадобился бы только при разработке страниц с использованием ASP, ColdFusion или PHP (см. раздел Настройка компьютера для разработки программ). Если вы создаете веб-сайты, использующие только HTML, и не определили тестовый сервер, нажмите F12 (Windows) или Opt+F12 (Macintosh) для вывода на экран элементов управления обложкой. Чтобы обойти это ограничение, нужно либо определить тестовый сервер и использовать его для предпросмотра страницы, либо загрузить файлы на удаленный сервер и просмотреть их там.

Вставка html5 видео – Можно ли в Html5 с помощью тега video запускать потоковое видео? — Хабр Q&A