| WebReference
Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задаётся через атрибут src или вложенный элемент <source>. Список поддерживаемых браузерами аудио и видеокодеков ограничен и приведён в табл. 1.
| Браузер | ||||||
| Аудио кодеки | ||||||
|---|---|---|---|---|---|---|
| ogg/vorbis | 17 | 4 | 11.5 | 3.5 | ||
| wav | 12 | 8 | 11.5 | 4 | 3.5 | |
| mp3 | 9 | 12 | 4 | 15 | 4 | 22 |
| AAC | 9 | 12 | 12 | 15 | 4 | 22 |
| Видео кодеки | ||||||
| ogg/theora | 17 | 4 | 11.5 | 3.5 | ||
| H.264 | 9 | 12 | 4 | 25 | 3.2 | 21 |
| WebM | 14 | 6 | 11. 5 | 4 | ||
Firefox поддерживает AAC частично — только в контейнере MP4 и когда операционная система поддерживает этот формат.
Для универсального воспроизведения в указанных браузерах видео кодируют с помощью разных кодеков и добавляют файлы одновременно (см. пример).
Синтаксис
<video> <source src="<адрес>"> </video>
Атрибуты
- autoplay
- Видео начинает воспроизводиться автоматически после загрузки страницы.
- controls
- Добавляет панель управления к видеоролику.
- height
- Задаёт высоту области для воспроизведения видеоролика.
- loop
- Повторяет воспроизведение видео с начала после его завершения.
- poster
- Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
- preload
- Используется для загрузки видео вместе с загрузкой веб-страницы.
- src
- Указывает путь к воспроизводимому видеоролику.
- width
- Задаёт ширину области для воспроизведения видеоролика.
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>video</title> </head> <body> <video controls=»controls» poster=»video/duel.jpg»> <source src=»video/duel.ogv» type=’video/ogg; codecs=»theora, vorbis»‘> <source src=»video/duel.mp4″ type=’video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘> <source src=»video/duel.webm» type=’video/webm; codecs=»vp8, vorbis»‘> Элемент video не поддерживается вашим браузером. <a href=»video/duel.mp4″>Скачайте видео</a>. </video> </body> </html>Результат примера в браузере показан на рис. 1.
Рис. 1. Воспроизведение видеофайла
Спецификация
| Спецификация | Статус |
|---|---|
| WHATWG HTML Living Standard | Живой стандарт |
| HTML5 | Рекомендация |
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 9 | 12 | 4 | 11.5 | 4 | 3.5 |
2. 1 | 3.5 | 12 | 3.2 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Аудио и видео
См. также
- <source>
- <track>
- Адаптивное встраивание
- Видео на сайте
- Добавление медиа-контента
Практика
- Автовоспроизведение видео
- Добавление видео
- Зацикливание видео
- Обложка видео
- Размеры видеоплеера
Видео и аудио в HTML. Урок 9
Содержание:
- Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7 Урок 8 Урок 9 Создание html-документа Структура html-документа Абзацы Заголовки Служебные теги Изображения Ссылки Списки Таблицы Формы Видео Аудио Справочник HTML Справочник CSS Создать сайт на HTML\CSS
Урок наглядно покажет: как вставить видео на веб-страницу любой версии HTML.
Рассмотрим, для каждого способа вставки видео на сайт, имеющиеся у него плюсы и минусы.
Вначале о том, как вставить видео на страницу с любой версией HTML (HTML5, XHTML). Этот пример универсален и работает на 99.9%: пользователь сможет посмотреть видео в любом более-менее не старом браузере, каким-бы устройством он не пользовался.
Для этого потребуется плеер, например: FlowPlayer, который без труда можно найти в сети. Этот плеер проигрывает видео в формате MP4 и FLV.
Код для вставки видео на страницу выглядит следующим образом (где «papka/name.…» — это путь к вашему видеофайлу, а «name» — его имя):
<video preload="auto" controls>
<source src="papka/name.mp4" />
<source src="papka/name.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="papka/name.webm" type='video/webm; codecs="vp8, vorbis"' />
<object type="application/x-shockwave-flash">
<param name="movie" value="papka/flowplayer-3. 2.6.swf" />
<param name="flashvars" value='config={"clip":"papka/name.mp4"}' />
</object>
<p>Ваш браузер не поддерживает просмотр</p>
<a href="papka/name.mp4">Скачать видео</a>
</video>
2.6.swf" />
<param name="flashvars" value='config={"clip":"papka/name.mp4"}' />
</object>
<p>Ваш браузер не поддерживает просмотр</p>
<a href="papka/name.mp4">Скачать видео</a>
</video>
Поместите FlowPlayer в ту же папку, где находятся видеофайлы. Атрибуты тега Видео в данном примере: preload="auto" — загружает видео вместе со страницей, если не использовать этот атрибут, то страница загрузится быстрее, а видео подгрузится при его включении пользователем;
Замените пропорционально ширину и высоту видео (width и height — в двух местах) на свои, не забывая про соотношение его сторон: 4:3 или 16:9.
Последние две строчки: теги <p> и <a> с содержимым — позволят пользователю скачать видеофайл, если он всё-таки не сможет его просмотреть.
Вы сразу же сможете проверить работоспособность кода на вашем компьютере. Но для просмотра видео на сайте может потребоваться создать файл httpd.conf, поместить его в папку с видеофайлами — он должен содержать три строчки:
AddType video/ogg.ogv AddType video/mp4.mp4 AddType video/webm.webmМинусом этого способа будет большое потребление ресурсов при одновременном просмотре видео большим количеством посетителей, но это легко нейтрализовать. Для снижения нагрузки на сервер нужно размещать видео на сторонних сервисах, типа облачного хранилища Яндекс Диск, где срок хранения файлов не ограничен.
Вставка видео в HTML5 без плеера
А так можно вставить видео на страницу с HTML5, здесь атрибут <poster — это путь к изображению-заставке:
<video controls poster="images/zastavka.
png">
<source src="papka/name.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="papka/name.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="papka/name.webm" type='video/webm; codecs="vp8, vorbis"'>
<p>Ваш браузер не поддерживает просмотр</p>
<a href="papka/name.mp4">Скачать видео</a>
</video>
Чтобы добиться воспроизведения ролика в различных браузерах, видео необходимо конвертировать, а в папку поместить 3 видеофайла в разных форматах. Это можно сделать онлайн, например, здесь: online-convert.com.
Минусом этого способа будет то, что на некоторых устаревших устройствах код будет работать некорректно. Если кроссбраузерность жизненно необходима, то лучше применять вариант №1 — вставку видео с использованием плеера.
Вставка аудио
Для того чтобы вставить аудио на страницу у нас в распоряжении опять 2 варианта: с mp3-плеером и без него — с помощью кода HTML5.
Способ 1. Код вставки аудио на страницу (где «papka/name.…» — путь к аудиофайлу, а «name» — его имя):
<audio controls>
<source src="papka/name.mp3">
<source src="papka/name.ogg">
<source src="papka/name.wav">
<p>Ваш браузер не поддерживает прослушивание</p>
<a href="papka/name.mp3">Скачать аудио</a>
</audio>
Нужно конвертировать аудиофайл в три формата, а если браузер у пользователя окажется устаревшим, то он сможет скачать файл.
Для снижения нагрузки на ваш сервер, желательно хранить аудиофайлы на стороннем ресурсе, таком как Я.Диск (см. ссылку выше).
Способ 2. Скачайте mp3-плеер (flv-mp3.com/ru) и поместите его в папку с аудиофайлами. На этом сайте есть возможность «собрать» плеер самому, т.
При сборке аудио-плеера важны два параметра: адрес плеера — вы можете указать папку своего домена (что предпочтительнее), или подгружать его прямо с указанного сайта. Это отразится в коде, который вы сможете скопировать для вставки на веб-страницу, сразу после окончания сборки.
Второй параметр будет влиять на размеры и вид панели плеера, а так же надписи «Прослушать» — её вы измените на свою. Выглядеть панель будет как на следующем скриншоте, но вы сможете изменить цвет, форму и кнопки управления на более красивые:
Если нужно — укажите автозапуск, а полученный код разместите на нужной странице — его, кстати, всегда можно будет отредактировать: вручную или снова посетив страницу сборки плеера.
Содержание:
- Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7 Урок 8 Урок 9 Создание html-документа Структура html-документа Абзацы Заголовки Служебные теги Изображения Ссылки Списки Таблицы Формы Видео Аудио Справочник HTML Справочник CSS Создать сайт на HTML\CSS
Поделиться с друзьями:
О партнёрках
получить
Сайт с нуля
получить
Как встроить видео в HTML5
Реклама
В этом уроке вы узнаете, как встроить видео в документ HTML.
Встраивание видео в HTML-документ
Вставить видео на веб-страницу было непросто, поскольку веб-браузеры не имели единого стандарта для определения встроенных мультимедийных файлов, таких как видео.
В этой главе мы продемонстрируем некоторые из множества способов добавления видео на веб-страницы, начиная с последней версии HTML5 к популярным видео на YouTube.
Использование элемента HTML5 video
Недавно представленный элемент HTML5 к популярным видео на YouTube.
Использование элемента HTML5 video
Недавно представленный элемент HTML5 обеспечивает стандартный способ встраивания видео в веб-страницы. Тем не менее, элемент видео относительно новый, но он работает в большинстве современных веб-браузеров.
В следующем примере видео просто вставляется в HTML-документ с использованием набора элементов управления браузера по умолчанию, причем один источник определяется атрибутом src .
Пример
Попробуйте этот код »mp4"> Ваш браузер не поддерживает элемент видео HTML5.
Видео, использующее набор элементов управления браузера по умолчанию, с альтернативными источниками.
Пример
Попробуйте этот код »Использование элемента object
Элемент используется для встраивания различных типов мультимедийных файлов в документ HTML. Первоначально этот элемент использовался для вставки элементов управления ActiveX, но согласно спецификации объектом может быть любой медиа-объект, такой как видео, аудио, файлы PDF, Flash-анимация или даже изображения.
Следующий фрагмент кода встраивает Flash-видео в веб-страницу.
Пример
Попробуйте этот код » Это видео будет воспроизводиться только браузерами или приложениями, поддерживающими Flash.
Предупреждение: Элемент широко не поддерживается и во многом зависит от типа внедряемого объекта. Другие методы могут быть лучшим выбором во многих случаях. Устройство iPad и iPhone не может отображать Flash-видео.
Использование элемента embed
Элемент используется для встраивания мультимедийного содержимого в документ HTML.
Следующий фрагмент кода встраивает Flash-видео в веб-страницу.
Пример
Попробуйте этот код »Предупреждение: как стандарт в HTML5, но ваше видео может не воспроизводиться из-за отсутствия поддержки браузером Flash или отсутствия подключаемых модулей.
Встраивание видео YouTube
Это самый простой и популярный способ встраивания видеофайлов в веб-страницы. Просто загрузите видео на YouTube и вставьте код HTML, чтобы отобразить это видео на своей веб-странице.
Вот живой пример с объяснением всего процесса:
Шаг 1: Загрузите видео
Перейдите на страницу загрузки видео на YouTube и следуйте инструкциям по загрузке видео.
Шаг 2: Создание HTML-кода для встраивания видео
Когда вы откроете загруженное видео на YouTube, вы увидите что-то вроде следующего рисунка в нижней части видео. Найдите и откройте загруженное видео на YouTube. Теперь найдите кнопку «Поделиться», которая находится чуть ниже видео, как показано на рисунке.
Когда вы нажмете кнопку «Поделиться», откроется панель общего доступа с дополнительными кнопками. Теперь нажмите кнопку «Встроить», он сгенерирует HTML-код для непосредственного встраивания видео на веб-страницы. Просто скопируйте и вставьте этот код в свой HTML-документ, где вы хотите отобразить видео, и все готово. По умолчанию видео встроено в iframe.
Вы можете дополнительно настроить этот код для встраивания, например изменить размер видео, выбрав параметр настройки, указанный чуть ниже поля ввода кода для встраивания.
В следующем примере просто встраивается видео с YouTube. Давайте попробуем:
Пример
Попробуйте этот код »
<голова>
<мета-кодировка="utf-8">
Видео YouTube
<тело>
Предыдущая страница Следующая страница
Видеоруководство по HTML5
К сожалению, во время создания Всемирной паутины не было встроенного языка для видео, поэтому веб-браузеры не могли воспроизводить или вставлять видео без стороннего подключаемого модуля/программного приложения. Теперь, благодаря HTML5, вы можете добавлять собственное видео на свои веб-страницы, не требуя установки стороннего программного обеспечения на свой компьютер/веб-браузеры.
Откройте файл eh5v-howto.html, чтобы узнать, как добавить видео HTML5 на веб-страницу
Существует три основных формата, которые могут поддерживать все основные браузеры: WebM, MP4 и OGV.
Не каждый браузер будет поддерживать все три, поэтому важно добавить несколько источников в кодировку языка для вашего видеофайла, чтобы браузер мог искать более чем в одном месте, если первый в списке не работает или не работает. не поддерживается. Вот пример одного источника:
— в теге видео их будет несколько с разными форматами файлов. Видео посмотрю первое, что сработает; если все не будет работать, то видео не будет воспроизводиться.
Чтобы встроить видеофайл в вашу веб-страницу, вам нужно будет использовать атрибут элемента видео. Внутри этого тега у вас будет SRC или исходный атрибут, где веб-браузер будет искать видео. В элементе видео вы можете указать
В атрибуте видеоэлементов вы можете добавить параметр управления, чтобы браузер воспроизводил видео, используя элементы управления по умолчанию. Если это не введено, браузер может вообще не использовать какие-либо элементы управления, и, таким образом, у видео не будет механизма управления воспроизведением, остановкой и паузой.
В дополнение к этому вы можете добавить атрибут
.
Если вы хотите иметь рекламное изображение или изображение, которое пользователь увидит до того, как нажмет кнопку воспроизведения на элементах управления видео, вы можете добавить атрибут
В дополнение к указанным выше атрибутам вы также можете добавить атрибуты отключения звука и автоматического воспроизведения, которые либо указать браузеру отключать звук видео при загрузке страницы или автоматически воспроизводить видео.
Шаг за шагом:
- 1.Выберите язык документа HTML5.
