HTML5 Video Tag - учебник по атрибутам видео - httpdoc.ru

HTML5 Video Tag - учебник по атрибутам видео

Тег HTML5 video добавляет и управляет видеоконтентом на веб-странице с его различными атрибутами. Это один из умных способов разнообразить контент веб-сайта. Поисковые системы любят видеоконтент, поскольку он привлекает больше всего пользователей. Это помогает повысить рейтинг в результатах поиска.

Тег видео был введен в HTML5 по мере увеличения спроса на видеоконтент. Тег HTML5 <video> отображает видеопроигрыватель на веб-странице с настраиваемыми элементами управления. Этими элементами управления можно управлять с помощью атрибутов тега видео. Вы получите полное руководство по атрибутам, давайте сначала рассмотрим базовый пример того, как добавить видео на веб-страницу:

Пример тега HTML5 Video

type Атрибут определяет формат видео файла , используемый.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> HTML Video </title>
</head>

<body>

<video width="480" height="320" controls> 
<source src="/media/pages/images/mp4"> 
Your browser does not support the video tag.
</video> 

</body> 
</html>

Выход

HTML Video Tag Examples

Разбивка атрибутов тегов видео HTML5

Тег HTML5 video также имеет множество атрибутов и вложенных тегов. Разберем его структуру:

  • Тег видео: это парный тег, и весь код, относящийся к видео, будет записан внутри него. Он отображает видеоплеер на веб-странице.
  • Атрибуты «высота» и «ширина»: эти атрибуты определяют размер плеера.
  • Атрибут 'controls': добавляет в проигрыватель элементы управления видео, такие как воспроизведение, пауза и громкость.
  • Тег <source>: он определяет характеристики добавляемого видео, такие как его местоположение (URL) и тип. Вы можете добавить несколько тегов источника внутри одного тега видео, чтобы добавить видеофайл с другим типом видео. Браузер будет воспроизводить первый поддерживаемый тип видео.
  • Атрибут src: этот атрибут является альтернативой тегу <source>. Если вы хотите добавить видеофайл одного типа, используйте этот атрибут внутри тега видео. Он также используется внутри тега источника для добавления местоположения видеофайла.
  • Атрибут type: указывает тип видеофайла.

История тега HTML5 Video

В HTML4 и более ранних версиях HTML видеофайлы можно было добавлять на веб-сайты только с помощью различных multimedia plugins (например, Adobe Flash). Тег <video> был введен в HTML 5 (официально именуемый HTML5 - без пробела). В настоящее время он широко применяется в основных браузерах.

HTML5 native video element поддерживает три формата видео (MP4, WebM and Ogg) , что упрощает встраивание видео на веб-страницу.


Управление видео

Всегда рекомендуется добавлять HTML5 video controls в свой плеер. Используя специальные кнопки в окне проигрывателя, пользователь может вручную запускать и останавливать видео, переходить к определенному месту с помощью ползунка или переключаться между оконным и полноэкранным отображением видео, регулировать громкость. Чтобы добавить элементы управления видео, включите атрибут управления.

Резервный контент

Если видео не может быть воспроизведено в любом из предоставленных форматов, пользователь увидит текст, известный как fallback content . Это единственный контент в <video> тегах. Используйте его, чтобы предоставить пользователю информацию или прямую ссылку на видеофайл.

Указание источников

HTML 5 Поддержка таких атрибутов, как предварительная загрузка, автовоспроизведение, цикл и другие. Также обязательно указать источник видео. Вы можете сделать это с помощью простого src атрибута, но для этого рекомендуется выбрать <source> теги:

Причина, по которой это считается лучшей практикой, заключается в том, что использование <source> тегов позволяет вам определять multiple sources . Видеоплеер HTML5 поддерживает три формата (.mp4, .ogg и .webM), но не все из них имеют одинаковый уровень поддержки браузером. Это означает, что вы можете добавлять видео в разных форматах для обеспечения воспроизведения видео.

Тег source позволяет указать несколько форматов на fallback случай, если браузер пользователя не поддерживает один из них. Например:

Синтаксис
< элементы управления видео > 
  < source src = "devstories.webm"  
          type = 'video / webm; codecs = "vp8, vorbis"' / > 
  < source src = "devstories.mp4" 
          type = 'video / mp4; codecs = "avc1 .42E01E, mp4a.40.2 "' / > 
< / video >

Когда браузер анализирует <source> тег, он использует необязательный атрибут type, чтобы решить, какой файл загрузить и воспроизвести. Если браузер поддерживает WebM и имеет кодеки VP8 и Vorbis, он будет воспроизводить devstories.webm, если нет, он проверит, может ли он воспроизводить видео MPEG-4 с кодеками avc1.42E01E и mp4a.40.2 и т. Д.

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

Медиа-фрагменты

Добавляя фрагмент мультимедиа к URL-адресу мультимедиа, вы можете указать точную часть, которую хотите воспроизвести. Чтобы добавить фрагмент мультимедиа, вы просто добавляете #t=[start_time][,end_time] его в URL-адрес мультимедиа. Например, чтобы воспроизвести видео с 10 по 20 секунд, вы можете указать:

Синтаксис
< source src = "devstories.webm # t = 10,20"  
        type = 'video / webm; codecs = "vp8, vorbis"' / >

Пример
<!DOCTYPE html>
	<html lang="en">
	<head>
	  <meta charset="UTF-8">
	  <title> HTML Media Fragment </title>	
	</head>
	<body>

	<video width="480" height="320" controls> 
	<source src="/media/pages/images/mp4">

	</body>
	</html>

Вы также можете указать время в часах: минутах: секундах, например, #t=00:01:05 чтобы начать видео через одну минуту, через пять секунд. Или, чтобы воспроизвести только первую минуту видео, вы должны указать #t=,00:01:00 . Вам необходимо убедиться, что ваш сервер поддерживает запросы диапазона: проверьте Accept Ranges: bytes. Он включен по умолчанию для Apache и многих других серверов, но стоит проверить.


HTML-форматы видео

Формат видео файла Тип носителя
.mp4 Видео / mp4
.ogg видео / ogg
.webM видео / webM

Руководство по атрибутам тегов видео

HTML-тег видео имеет различные атрибуты для управления видеоконтентом. Эти атрибуты необязательно использовать, но они обеспечивают лучший контроль над воспроизведением видео. Например: включение автовоспроизведения видео, добавление миниатюры видео и т. Д. Взгляните на список атрибутов, поддерживаемых тегом видео:

Атрибуты, специфичные для элемента

Список атрибутов видео HTML

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

Этот атрибут является логическим атрибутом. Следовательно, простое присутствие этого атрибута приравнивается к истинному значению. Вы также можете указать значение, которое является нечувствительным к регистру совпадением для канонического имени атрибута, без начальных или конечных пробелов (т.е. либо autoplay, либо autoplay = "autoplay").

  • Возможные значения:
    • [Пустой строки]
    • Автовоспроизведение
медиагруппа

Для синхронизации воспроизведения видео (или медиа-элементов). Позволяет указать элементы мультимедиа, которые необходимо связать вместе. Значение представляет собой строку текста, например: mediagroup = movie. Видео / мультимедийные элементы с одинаковым значением автоматически связываются пользовательским агентом / браузером.

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

контроль

Указывает, следует ли отображать элементы управления видео (например, кнопку воспроизведения / паузы и т. Д.). Этот атрибут является логическим атрибутом. Следовательно, простое присутствие этого атрибута приравнивается к истинному значению. Вы также можете указать значение, которое является нечувствительным к регистру совпадением с каноническим именем атрибута, без начальных или конечных пробелов (например, control или controls = "controls").

петля

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

предварительная нагрузка Он определяет вид автора для загрузки видеофайла при загрузке страницы. Игнорируется, если autoplay используется. Определяет, должно ли видео быть предварительно загружено или нет, и если да, то как оно должно быть предварительно загружено. Этот атрибут позволяет автору подсказывать браузеру / пользовательскому агенту, что, по мнению автора, приведет к наилучшему взаимодействию с пользователем. В некоторых случаях этот атрибут можно игнорировать. Например, если пользователь отключил предварительную загрузку или есть проблемы с подключением к сети.
  • Возможные значения:
    • none: указывает браузеру, что пользователь, скорее всего, не будет смотреть видео или что желательно свести к минимуму ненужный трафик.
    • метаданные: указывает браузеру, что пользователю не нужно видео, но желательно получить его метаданные (размеры, первый кадр, список дорожек, продолжительность и т. д.).
    • auto: указывает браузеру, что оптимистичная загрузка всего видео считается желательной.

Обратите внимание, что атрибут autoplay может переопределить атрибут preload (поскольку, если медиа воспроизводится, он, естественно, сначала должен буферизоваться, независимо от подсказки, данной атрибутом preload). Несмотря на это, вы все равно можете предоставить оба атрибута.

немой

Управляет состоянием аудиовыхода видео по умолчанию. Если этот атрибут присутствует, то при загрузке аудиовыход отключается (т. Е. Отсутствует звук). Этот атрибут переопределит предпочтения пользователей. Затем пользователь может выбрать включение звука, если он / она того пожелает. Это помогает пользователям не раздражаться громкими звуками, исходящими из видео, как только страница / видео начинает загружаться. Когда это происходит, пользователи часто закрывают свой браузер. Атрибут «без звука» призван решить эту проблему, заставляя видео запускаться беззвучно, а не громко.

Этот атрибут является логическим атрибутом. Следовательно, простое присутствие этого атрибута приравнивается к истинному значению. Вы также можете указать значение, которое является нечувствительным к регистру совпадением для канонического имени атрибута, без начальных или конечных пробелов (т. Е. Приглушено или приглушено = "приглушено").
  • Возможные значения:
    • [Пустой строки]
    • приглушенный
src Он указывает исходный URL-адрес видеофайла.

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

video Тег принимает следующие глобальные атрибуты. Эти атрибуты являются стандартными для всех тегов HTML 5.

Видео тег Описание
ключ доступа Задает сочетание клавиш, которое можно использовать для доступа к этому <video> элементу.

Возможные значения.

[Любая строка символов. Эта строка символов определяет ключ / ключи, которые необходимо использовать пользователю для доступа к элементу.]

класс Это общий идентификатор документа. Он используется для ссылки на класс, указанный в таблице стилей. Значение должно соответствовать имени класса, который вы хотите использовать.
удовлетворенный Этот атрибут указывает, может ли пользователь редактировать контент или нет.

Возможные значения:

  • правда
  • ложный
контекстное меню contextmenu Атрибут задает контекстное меню для элемента. Значение должно быть идентификатором элемента меню в DOM.
реж Задает направление текста.

Возможные значения:

Ценить Описание
ltr Указывает, что текст следует читать слева направо.
RTL Текст следует читать справа налево.
авто Направление текста должно определяться программно с использованием содержимого элемента.
перетаскиваемый Это позволяет пользователю перетаскивать <video> элемент. Просто добавьте этот атрибут в тег и используйте функцию перетаскивания.

Возможные значения:

  • правда
  • ложный
  • авто
Ценить Описание
правда Он включает свойство перетаскивания элемента.
ложный Он отключает перетаскиваемое свойство.
авто Он рассчитывается со значением браузера по умолчанию.
зона сброса В dropzone атрибут определяет , что должно произойти , когда пользователь «падает» элемент (т.е. после перетаскивания его) на этот <video> элемент.

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

Возможные значения:

Ценить Описание
копировать Приводит к копии перетаскиваемых данных. Значение по умолчанию.
двигаться Приводит к перемещению данных в новое место.
ссылка Приводится ссылка на исходные данные.
Любое ключевое слово из восьми или более символов, начинающееся с совпадения без учета регистра в кодировке ASCII для строки " string: " Указывает, что принимаются элементы с типом перетаскиваемого элемента данных Обычная строка Unicode и для строки типа перетаскиваемого элемента данных, для которой установлено значение, соответствующее остальной части ключевого слова.
Любое ключевое слово из шести или более символов, начинающееся с совпадения без учета регистра в кодировке ASCII для строки " file: " Позволяет указать, какие типы файлов можно обрабатывать (т. Е. Копировать, перемещать или связывать) в этой зоне перетаскивания. Пример: dropzone="copy file:image/png file:image/gif file:image/jpeg"

Обратите внимание, что для этого атрибута не должно быть указано более одного из трех значений обратной связи (копирование, перемещение и ссылка). Если ничего не указано, подразумевается значение копии.

скрытый Скрытый атрибут, как следует из названия, используется, чтобы скрыть любой элемент. Вы можете использовать этот элемент с <video> тегом.
я бы id Атрибут представляет собой широкий идентификатор документа, который используется в сочетании с CSS и JavaScript. Значение должно соответствовать имени идентификатора, который вы хотите использовать.
itemid itemid Обеспечивает глобальный идентификатор для элемента «». Этот атрибут является необязательным, однако, если он указан, он должен иметь значение, которое является допустимым URL-адресом, потенциально окруженным пробелами.

itemid Атрибут может присутствовать только в элементах , которые включают в себя как itemscope и те itemtype атрибуты, до тех пор , как itemtype атрибут определяет словарь , который поддерживает глобальные идентификаторы для элементов, как это определено в спецификации этого словарного запаса в.

повторять Этот атрибут предоставляет одно или несколько свойств одному или нескольким «элементам».

Хотя этот атрибут является необязательным, если он используется, он должен иметь значение, которое представляет собой неупорядоченный набор уникальных разделенных пробелами токенов, чувствительных к регистру и представляющих имена пар имя-значение, которые он добавляет. В значении атрибута должен быть хотя бы один токен. Каждый токен должен быть одним из следующих:

  • Действительный URL-адрес, который является абсолютным URL-адресом, или
  • Если элемент является типизированным элементом: в этой ситуации разрешено "определенное имя свойства" в соответствии со спецификацией, которая определяет соответствующие типы для элемента, или
  • Если элемент не является типизированным элементом: строка, не содержащая символов U + 002E FULL STOP (.) И символов COLON U + 003A (:).

Кроме того, спецификации, которые вводят определенные имена свойств, которые не являются абсолютными URL-адресами, должны гарантировать, что все такие имена свойств не содержат символов U + 002E FULL STOP (.), Символов COLON U + 003A (:) и пробелов.

itemref Этот атрибут используется вместе с itemscope атрибутом, itemref атрибут предоставляет список дополнительных элементов для обхода для поиска пар имя-значение «элемента». Хотя itemref атрибут является необязательным, если он указан, он должен иметь значение, которое представляет собой неупорядоченный набор уникальных разделенных пробелами токенов, чувствительных к регистру и состоящих из идентификаторов элементов в одном и том же домашнем поддереве. Кроме того, itemref можно использовать только для элементов, которые также имеют itemscope атрибут.
предмет Элементы HTML5, у которых есть itemscope атрибут, создают пару «имя-значение», называемую «элементом». Элементы с itemscope атрибутом также могут иметь itemtype указанный атрибут, чтобы указать типы элемента.

Это логический атрибут. Если атрибут присутствует, его значение должно быть либо пустой строкой, либо значением, которое является нечувствительным к регистру ASCII соответствием каноническому имени атрибута, без начальных или конечных пробелов (т. Е. Либо, itemscope либо itemscope="itemscope" ).

Возможные значения:

  • [Пустой строки]
  • предмет
тип вещи Этот атрибут обеспечивает тип элемента для элементов, содержащих itemscope атрибут. Атрибут является необязательным, но если он указан, он должен иметь значение, которое представляет собой неупорядоченный набор уникальных разделенных пробелами токенов, чувствительных к регистру, каждый из которых является допустимым URL-адресом, который является абсолютным URL-адресом, и все они определены для использования того же словаря. В значении атрибута должен быть хотя бы один токен.

itemtype Атрибут должен присутствовать только в элементах , которые включают в себя itemscope атрибут.

язык Устанавливает код языка, который будет использоваться.

Возможные значения:

[Должен быть допустимый код языка RFC 3066 или пустая строка.]

проверка орфографии Указывает, следует ли проверять орфографию элемента.
Ценить Описание
[Пустой строки] Орфография элемента должна быть проверена.
правда Орфография элемента должна быть проверена.
ложный Орфография элемента не должна проверяться.

Если этот атрибут отсутствует, элемент будет использовать поведение по умолчанию, возможно, на основе собственного spellcheck состояния родителя .

стиль Задает встроенные стили для этого <video> элемента. Это позволяет вам определять стили внутри страницы и внутри этого <video> тега, в отличие от ссылок на стили, определенные где-то еще (например, внешняя таблица стилей). Хотя это может быть полезно для переопределения внешних стилей, обычно предпочтительно использовать внешние стили в сочетании с class атрибутом и / или id атрибутом.
tabindex Помогает определить порядок <video> табуляции для этого элемента (когда пользователь использует клавишу «табуляция» на своей клавиатуре для «табуляции» по элементам на странице, чтобы выбрать элемент).

Возможные значения:

[Любое действительное целое число. Например, 0, 1, 2, 3, ... и т. Д.]

заглавие Он определяет заголовок <video> элемента. Всякий раз, когда пользователь наводит курсор на этот элемент, будет отображаться указанный заголовок, который будет выглядеть как всплывающая подсказка.
перевести Определяет, должны ли быть переведены значения атрибутов элемента и значения его дочерних узлов Text при локализации страницы или же оставить их без изменений.

translate Атрибут является атрибутом Перечислимым и может содержать следующие возможные значения:

  • [Пустой строки]
  • да
  • нет

Если translate атрибут предоставлен, но его значение отсутствует или недействительно, элемент унаследует свое значение от своего родительского элемента.


Атрибуты содержимого обработчика событий

Атрибуты содержимого обработчика событий позволяют вызывать сценарий из HTML-кода. Сценарий вызывается, когда происходит определенное "event" . Каждый атрибут содержимого обработчика событий имеет дело с отдельным событием.

Вот стандартные атрибуты содержимого обработчика событий HTML 5.

Видео тег Описание
onabort Вызывается, когда событие было прервано. Например, браузер прекращает получение мультимедийных данных до того, как они будут полностью загружены.
onblur Пользователь покинул фокус элемента.
oncancel cancel обработчик события.
oncanplay Вызывается, когда браузер / пользовательский агент может начать воспроизведение мультимедиа, но еще не сделал этого из-за буферизации. Другими словами, если бы воспроизведение началось сейчас, оно не воспроизводилось бы до конца (из-за текущей скорости воспроизведения) - ему нужно было бы приостановить воспроизведение, чтобы загрузить остальную часть мультимедиа.
oncanпрохождение Браузер / пользовательский агент оценивает, что если бы воспроизведение началось сейчас, медиаресурс мог бы быть отрисован с текущей скоростью воспроизведения до самого конца без необходимости останавливаться для дальнейшей буферизации.
по изменению Пользователь изменил объект, затем пытается покинуть это поле (т. Е. Щелкает в другом месте).
по щелчку Вызывается, когда пользователь щелкает объект.
onclose close обработчик события.
oncontextmenu Вызывается при запуске контекстного меню.
oncuechange cuechange обработчик события.
ondblclick Вызывается, когда пользователь дважды щелкает по объекту.
ондраг Вызывается при перетаскивании элемента.
ондрагенд Вызывается, когда перетаскивание элемента прекращается.
ондрагентер Вызывается, когда элемент перетаскивается в цель перетаскивания.
ondragexit dragexit обработчик события.
Ondragleave Вызывается, когда элемент покидает допустимую цель перетаскивания.
ондраговер Вызывается, когда элемент перетаскивается через допустимую цель перетаскивания.
ondragstart Вызывается при запуске операции перетаскивания.
капля Вызывается, когда элемент удаляется.
ondurationchange Вызывается при изменении длины носителя (т. Е. duration Атрибут только что был обновлен).
один пустой Вызывается, когда элемент медиаресурса внезапно становится пустым (например, из-за сетевой ошибки).
закончился Вызывается, когда СМИ подошли к концу.
ошибка Вызывается при возникновении ошибки во время загрузки элемента. Также обработчик уведомлений об ошибках скрипта.
onfocus Вызывается, когда фокус находится на элементе.
на входе input обработчик события.
недействительный invalid обработчик события.
onkeydown Вызывается при нажатии клавиши над элементом.
onkeypress Вызывается, когда клавиша нажимается на элемент, а затем отпускается.
onkeyup Вызывается, когда над элементом отпускается клавиша.
в процессе Элемент загружен.
onloadeddata Вызывается, когда браузер / пользовательский агент может отображать мультимедийные данные в текущей позиции воспроизведения в первый раз.
onloadedmetadata Вызывается, когда браузер / пользовательский агент только что определил продолжительность и размеры медиаресурса.
onloadstart Вызывается, когда браузер / пользовательский агент начал загрузку медиаресурса.
onmousedown Курсор переместился на объект, и мышь / указательное устройство было нажато.
onmousemove Курсор перемещался при наведении курсора на объект.
onmouseout Курсор отошел от объекта
при наведении курсора на Курсор перемещается по объекту (т.е. пользователь наводит указатель мыши на объект).
onmouseup Мышь / указывающее устройство было отпущено после нажатия.
onmousewheel Вызывается при вращении колесика мыши.
пауза Вызывается, когда медиаресурс был приостановлен.
onplay Вызывается, когда медиаресурс начинает воспроизведение.
onplaying Воспроизведение началось.
в процессе Браузер / пользовательский агент загружает мультимедийные данные из файла.
onratechange Вызывается , когда скорость воспроизведения изменилась (т.е. либо defaultPlaybackRate или playbackRate только что был обновлен).
начало reset обработчик события.
onresize resize обработчик события.
прокрутка scroll обработчик события. Вызывается при прокрутке полосы прокрутки элемента.
искомый Вызывается, когда seeking атрибут IDL изменился на false (т. Е. seeking Атрибут больше не является истинным)
ищущий Вызывается, когда seeking атрибут IDL изменился на true и операция поиска длится достаточно долго, чтобы пользовательский агент успел запустить событие.
onselect Вызывается, когда выделено все или часть содержимого объекта. Например, пользователь выделил текст в текстовом поле.
выставка show обработчик события.
установленный Вызывается, когда браузер / пользовательский агент пытается получить мультимедийные данные, но данные остановились (т.е. данные перестали поступать).
onsubmit Пользователь отправил форму.
приостановить Браузер / пользовательский агент (намеренно) в настоящее время не загружает мультимедийные данные, но еще не загрузил весь мультимедийный ресурс (т.е. он приостановил загрузку).
ontimeupdate Вызывается при изменении текущей позиции воспроизведения мультимедиа.
onvolumechange Вызывается при изменении volume атрибута или muted атрибута.
в ожидании Следующий кадр мультимедиа еще не доступен (но браузер / пользовательский агент ожидает, что он станет доступным).

HTML-видео - методы, свойства и события

HTML5 определяет методы, свойства и события DOM для <video> элемента. Эти свойства и методы позволяют загружать, воспроизводить и приостанавливать видео, а также устанавливать продолжительность и громкость. Элемент HTML5 <video> определяет стандартный способ встраивания видео на веб-страницу.

type Атрибут определяет формат видео файла , используемый.

Пример
<!DOCTYPE html> 
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title> HTML Video Tag Advance </title>
</head>
<body> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br><br>
  <video id="video" width="420">
    <source src="/media/pages/images/mp4">
    <source src="/media/pages/images/ogg">
    Your browser does not support HTML5 video.
  </video>
</div> 
</html>

Файл сценария
<script> 
var myVideo = document.getElementById("video"); 

function playPause() { 
    if (myVideo.paused) 
        myVideo.play(); 
    else 
        myVideo.pause(); 
} 

function makeBig() { 
    myVideo.width = 560; 
} 

function makeSmall() { 
    myVideo.width = 320; 
} 

function makeNormal() { 
    myVideo.width = 420; 
} 
</script>

Совет по видео HTML5:

  • Если вы используете <source> элемент, мы рекомендуем вам добавить к нему атрибут type. Таким образом, браузер может сразу пропустить формат, который он не поддерживает, не пытаясь воспроизвести его и не тратя ресурсы.
  • Включив атрибут постера, вы можете добавить изображение, которое будет отображаться перед запуском видео.
  • Вы можете стилизовать свой видеопроигрыватель HTML5 с помощью CSS - например, вы можете изменить непрозрачность или установить границы.

Атрибуты видео HTML5

Теги Описание
<видео> Он определяет видео или фильм.
<источник> Он определяет несколько медиаресурсов для медиаэлементов, таких как <video> и <audio>
<трек> Он определяет текстовые дорожки в медиаплеерах.

Поддержка браузера

Элемент
Microsoft Edge browser.png Край
Chrome browser.png Хром
Firefox browser.png Fire Fox
Opera browser.png Опера
safari browser.png Сафари
.mp4
да
да
да
да
да
.ogg
Нет
да
да
да
Нет
.WebM
Нет
да
да
да
Нет