Видео тег: Видео на сайте | htmlbook.ru — Вебджем.рф | Создание и продвижение сайтов

Тег: видео // Смотрим

Профиль
Избранное

Политэкономика
Мобильный репортер.
Томск
Архив
Мир спас советский солдат

Cочельник с Борисом Корчевниковым
Сам себе режиссер

24 кадра
Hi-tech

Весь эфир

Авто-геолокация

➥ Тег — htmlbook.

info

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	3.0+	10.50+	3.1+	3.5+	2.0+	2.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

Табл. 1. Кодеки и браузеры
Аудио кодеки
Браузер	Internet Explorer	Chrome	Opera	Safari	Firefox
ogg/vorbis
wav
mp3
AAC
Видео кодеки
ogg/theora
H. 264
WebM

Для универсального воспроизведения в указанных браузерах видео кодируют с помощью разных кодеков и добавляют файлы одновременно (см. пример).

Синтаксис

<video>
 <source src="URL">
</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>

Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Воспроизведение видеофайла

Браузеры

Firefox поддерживает кодек WebM начиная с версии 4. 0.

Тег HTML video — Вставить элемент видео

« Все теги HTML
Описание всех тегов HTML »

HTML Тег используется для встраивания видеоконтента в HTML-документ без использования каких-либо дополнительных подключаемых модулей, таких как Flash player или любой другой подключаемый модуль. В настоящее время тег поддерживает форматы MP4, Ogg и Webm.
HTML Тег появился в HTML5.

Поддерживаемый формат видео и тип MIME

HTML Тег, поддерживает 3 типа видеофайлов

MP4 — видео/mp4 в формате MIME
Ogg — видео в формате MIME/ogg
Webm — видео в формате MIME/webm

Браузер	МР4	Огг	Вебм
Гугл Хром
Мозилла Фаерфокс
Сафари
Microsoft Edge
Опера

Пример

 

<голова>
  HTML-тег видео

<тело>

Запустить его… »

Пример

 

<голова>
  HTML-тег видео

<тело>
  <управление видео>
    
    
    
    Отображать это сообщение, если ваш браузер не поддерживает тег видео.

Запустить его… »

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

Атрибуты	Значение	Описание
идентификатор	уникальное_имя	Объявлен уникальный идентификатор элемента.
класс	имя_класса	Объявлено одно или несколько имен классов для элемента.
стиль	модели	Встроенные стили CSS определяют элемент.
наименование	Название	Укажите дополнительные сведения о содержании элемента, это будет отображаться как «подсказка» для элементов.

Атрибуты	Значение	Описание
онфокус	сценарий	получает фокус на объект при запуске скрипта.
размытие	сценарий	теряет фокус на объекте при запуске скрипта.
прерывание	сценарий	прерывается на объекте при запуске скрипта.
при смене	сценарий	получает любое изменение объекта при запуске скрипта.
перед выгрузкой	сценарий	выгружается на объект при запуске скрипта.
по клику	сценарий	щелкнул объект при запуске скрипта.
ondblclick	сценарий	двойной щелчок по объекту при запуске скрипта.
нажатие клавиши	сценарий	нажата при запуске скрипта.
нажатие клавиши	сценарий	нажата над элементом, а затем отпущена при запуске скрипта.
onkeyup	сценарий	отпускается над элементом при запуске скрипта.
	сценарий	кнопка мыши была нажата над элементом при запуске скрипта.
onmouseout	сценарий	указатель мыши отпускается над элементом при запуске скрипта.
перемещение мыши	сценарий	Запуск Указатель мыши перемещается при запуске скрипта.
при наведении мыши	сценарий	выполнить перемещение указателя мыши при запуске сценария.
для мыши вверх	сценарий	кнопка мыши отпускается при запуске скрипта.
при сбросе	сценарий	была сброшена при запуске скрипта.
по выбору	сценарий	Выберите содержимое при запуске скрипта.
при отправке	сценарий	была отправлена при запуске скрипта.
под нагрузкой	сценарий	объект загружается при запуске скрипта.
на смену	сценарий	позволяют изменить объект при запуске скрипта.
при разгрузке	сценарий	выгружать в окно браузера при запуске скрипта.
ондраг	сценарий	Элемент перетаскивается при запуске скрипта.
ондрагенд	сценарий	элемент перестает перетаскиваться при запуске скрипта.
Драгентер	сценарий	элемент перетаскивается при запуске скрипта.
на драже	сценарий	элемент остается перетаскиваемым при запуске скрипта.
ондраговер	сценарий	элемент находится над целью, перетаскиваемой при запуске скрипта.
ондрагстарт	сценарий	элемент начинает перетаскиваться при запуске скрипта.
ондроп	сценарий	удаляется при запуске скрипта.
при ошибке	сценарий	возникает при запуске скрипта.
в сообщении	сценарий	отображается при запуске скрипта.
при ошибке	сценарий	возникает при запуске скрипта.
на колесике мыши	сценарий	колесо мыши будет вращаться при запуске скрипта.
при прокрутке	сценарий	полоса прокрутки прокручивается при запуске скрипта.
изменение размера	сценарий
по выбору	сценарий	выбрано все содержимое элемента при запуске скрипта.
на складе	сценарий	должен быть сохранен в цели при запуске скрипта.

Видео тег: Видео на сайте | htmlbook.ru

Тег: видео // Смотрим

Политэкономика

Мобильный репортер.

Архив

Мир спас советский солдат

Cочельник с Борисом Корчевниковым

Сам себе режиссер

24 кадра

Hi-tech

➥ Тег — htmlbook.

Спецификация

Описание

Синтаксис

Атрибуты

Закрывающий тег

Браузеры

Тег HTML video — Вставить элемент видео

Поддерживаемый формат видео и тип MIME

Пример

Пример

Атрибуты тега

Глобальные атрибуты

Атрибуты событий

Совместимость с браузером

Как открыть видео в формате .

Добавить комментарий Отменить ответ

Рубрики