Htmlvideoelement установить: HTML5 Video Player — скачать бесплатно HTML5 Video Player для Windows

Содержание

HTML5 в Firefox — прогрессивный видеоплейер для браузера

Adobe Flash Player доживает свои последние годы. Данная платформа морально устарела, и разработчики перестанут поддерживать её уже к 2020 году. Многие компании, программисты и энтузиасты уже начали отказываться от проверенного формата в пользу прогрессивных, но ещё «сырых» технологий. Одним из таких новшеств является видеоплейер «HTML5», который, потенциально может заменить старый добрый Флэш Плеер.

Не все пользователи могут похвастаться мощными и современными персональными компьютерами со всеми обновлениями операционной системы (драйвера, кодеки). Не у всех установлена последняя версия браузера Mozilla Firefox (чем выше версия, тем меньше ошибок при работе). Но всем интересна жизнь, кипящая в глобальной сети Интернет. Тысячи фильмов и сериалов, десятки тысяч клипов, сотни тысяч забавных любительских видеороликов можно найти и посмотреть через всемирную паутину в любой точке планеты Земля.

Если при просмотре видео на компьютере возникают графические искажения, пользователю не стоит расстраиваться и искать альтернативу для просмотра. Первое что надо сделать – это проверить работоспособность своего ПК, все ли обновления, драйвера и кодеки есть и в рабочем состоянии. Второй нюанс – это проверка видеоплейера, встроенного в сам интернет обозреватель Мозила. Разработчики из Mozilla Corporation стараются угодить всем своим фанатам и просто пользователям поисковой системы. Поэтому у каждого есть возможность просмотра видеоизображений через различные плееры: Flash Player или HTML5. Чтобы проверить, какой плеер включён в браузере фаерфокс, достаточно нажать правой кнопкой мыши по экрану с видеорядом.

Как отключить HTML5 в Firefox

Если пользовательский персональный компьютер уступает по техническим характеристикам своим современным собратьям, можно попробовать сменить плеер с HTML5 на Adobe Flash Player. Для этого необходимо зайти в скрытые настройки браузера, набрав в поисковой строке «about:config». Разработчики любезно предупреждают о рисках, связанных с изменениями в «тонких» настройках. Принимаем ответственность на себя.

В окне «Поиск:», для простоты нахождения для изменения параметров, надо набрать английское слово «media».

Четыре параметра, которые могут быть включены по-молчанию, надо сменить с «true» на «false». То есть выключить их двойным щелчком левой кнопкой мыши.

media.ogg.enabled
media.wave.enabled
media.webm.enabled
media.windows-media-foundation.enabled

После перезагрузки браузера Mozilla Firefox настройки вступят в силу, и новый плеер HTML5 сменится на Adobe Flash Player.

Как включить HTML5 в Firefox

Если необходимо провести обратную манипуляцию и сменить старый проигрыватель от Adobe на прогрессивный аналог, пользователю нужно провести те же манипуляции с вышеупомянутыми параметрами с «false» на «true». Перезапустив интернет обозреватель, видео должно показывать без помех и сбоев.

Читайте так же:

HTMLVideoElement — Веб-технологии для разработчиков

HTMLVideoElement интерфейс предоставляет специальные свойства и методы для манипулирования видео объектов. Он также наследует свойства и методы HTMLMediaElement и HTMLElement.

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

  <div><svg viewbox="-50 0 600 140" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/ru/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ru/docs/Web/API/Node" target="_top"><rect x="151" y="1" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ru/docs/Web/API/Element" target="_top"><rect x="266" y="1" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25  351,20  351,30  341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ru/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25  501,20  501,30  491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ru/docs/Web/API/HTMLMediaElement" target="_top"><rect x="331" y="65" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="411" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLMediaElement</text></a><polyline points="331,89  321,84  321,94  331,89" stroke="#D4DDE4" fill="none"/><line x1="321" y1="89" x2="291" y2="89" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ru/docs/Web/API/HTMLVideoElement" target="_top"><rect x="131" y="65" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="211" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLVideoElement</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Свойства

Inherits properties from its parent, HTMLMediaElement

, and HTMLElement.

HTMLVideoElement.height: Is a DOMString that reflects the height HTML attribute, which specifies the height of the display area, in CSS pixels.
HTMLVideoElement.poster: Is a DOMString that reflects the poster HTML attribute, which specifies an image to show while no video data is available.
HTMLVideoElement.videoHeight Только для чтения: Returns an unsigned long containing the intrinsic height of the resource in CSS pixels, taking into account the dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used by the resource. If the element’s ready state is HAVE_NOTHING, the value is 0.
HTMLVideoElement.videoWidth Только для чтения: Returns an unsigned long containing the intrinsic width of the resource in CSS pixels, taking into account the dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used by the resource. If the element’s ready state is HAVE_NOTHING, the value is 0.
HTMLVideoElement.width: Is a DOMString that reflects the width HTML attribute, which specifies the width of the display area, in CSS pixels.

Gecko-специфичные свойства

HTMLVideoElement.mozParsedFrames Только для чтения: Returns an unsigned long with the count of video frames that have been parsed from the media resource.
HTMLVideoElement.mozDecodedFrames Только для чтения: Returns an unsigned long with the count of parsed video frames that have been decoded into images.
HTMLVideoElement.mozPresentedFrames Только для чтения: Returns an unsigned long with the count of decoded frames that have been presented to the rendering pipeline for painting.
HTMLVideoElement.mozPaintedFrames Только для чтения: Returns an unsigned long with the count of presented frames which were painted on the screen.
HTMLVideoElement.mozFrameDelay Только для чтения: Returns an double with the time which the last painted video frame was late by, in seconds.
HTMLVideoElement.mozHasAudio Только для чтения: Returns a Boolean indicating if there is some audio associated with the video.

Методы

Inherits methods from its parent, HTMLMediaElement, and HTMLElement.

HTMLVideoElement.getVideoPlaybackQuality(): Returns a VideoPlaybackQuality objects that contains the current playback metrics.

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

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

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Да)	4.0 (2.0)	9.0	10.50	(Да)
`mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay`	Нет	5.0 (5.0)	Нет	Нет	Нет
`mozHasAudio`	Нет	15.0 (15.0)	Нет	Нет	Нет
`getVideoPlaybackQuality()`	?	25.0 (25.0)^[1]	?	?	?

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Да)	4.0 (2.0)	9.0	(Да)	(Да)
`mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay`	Нет	5.0 (5.0)	Нет	Нет	Нет
`mozHasAudio`	Нет	15.0 (15.0)	Нет	Нет	Нет
`getVideoPlaybackQuality()`	?	25.0 (25.0)^[1]	?	?	?

[1] Gecko implements this behind the media.mediasource.enabled preference, defaulting to false.

См.также

Как отключить проигрыватель в html5 на youtube в разных браузерах

Если сравнить существующий сегодня YouTube с тем, который был еще 5-7 лет назад, то это совершенно два разных понятия……

Сотни терабайт эксклюзивного контента, постоянно растущая аудитория и новые функции – поменялось многое, но об о всем по порядку…………………….

→ Еще в преддверие 2017 года руководство YouTube анонсировало новый проигрыватель HTML5.

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

Не удивительно, что у новой функции появились сторонники и противники, поэтому ниже мы расскажем о технологии html5 на YouTube, а также как ее отключить ↓↓↓

Что это за Плеер ???

Многие пользователи YouTube в конце 2016 года стали наблюдать проблемы с работой сервисом !!!

• Как оказалось, причина крылась в очередной новинке – проигрывателе видео html5.

Пример проблемки ↓↓↓

Почему новая функция оказалась обузой для многих и, как ее отключить, — далее подробно ⇓

→ Проигрыватель html5 – новый стандарт воспроизведения видео, который сменил уже морально устаревший flash-плеер.

→ Еще в конце 2016 года все желающие могли протестировать функцию, активировав соответствующую кнопку (https://www.youtube.com/html5).

Разработчики обещали много интересных плюшек, среди которых:

отсутствие уязвимостей и торможения;
быстрое открытие роликов;
поддержка видео 64-бит;
воспроизведение новых стандартов (H.264, HTMLVideoElement и прочее).

На деле все оказалось намного плачевнее, ведь вместо обещанных «инноваций» пользователи получили много проблем:

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

Как оказалось, основные причины связаны в :

устаревшем железе
несоответствие ПО
драйверов
браузера и многое другое.

Теперь по адресу (https://www.youtube.com/html5) можно наблюдать надпись «Сейчас используется проигрыватель HTML5 всегда, когда это возможно», следовательно, у большинства зрителей уже нет выбора.

Внимание!
Чтобы проверить, какой проигрыватель используется на данный момент, наведите курсор мыши на видео и кликните на правую кнопку.

Если в нижней части имеется пункт «О проигрывателе html5», то используется соответствующий плеер

Вот ↓

Именно поэтому мы подготовили лучшие способы, как отключить проигрыватель html5 на YouTube в различных браузерах.

Это вполне реально и не займет много времени, поэтому читайте внимательно. ⇓⇓⇓

Убираем этот плеер в Firefox

На Firefox проблему можно решить, как минимум, двумя способами:

1) Посредством специальных дополнений (Disable Youtube HTML5 Player)

2) Или ручным способом.

В первом случае достаточно просто установить соответствующее расширение, чтобы отключить плеер html5 в YouTube.

Но наиболее простой метод мы рассмотрим ниже: ↓↓↓

Введите в поисковую строку «about:config», после чего откроется панель разработчика.
Скопируйте эти компоненты в отдельный документ: «media.ogg.enabled», «media.wave.enabled», «media.webm.enabled», «media.windows-media-foundation.enabled».
Каждый из них копируем в соответствующую строку поиска, находим в списке и отключаем. Для этого можно дважды кликнуть на запись.
Это действие необходимо проделать с каждым компонентом, приведенным выше.
Теперь выполните перезагрузку браузера.

Вы можете заметить, что теперь воспроизведение роликов осуществляется через flash-плеер !!!

В целом, ничего сложного и уже через 5 минут вы сможете наслаждаться любимыми роликами.

А теперь узнаем, как это выполнить в других браузерах ⇓⇓⇓

Убираем этот плеер в Chrome и Opera

Теперь мы рассмотрим другой метод, как отключить этот плеер при помощи специального приложения — Disable Youtube HTML5 Player ↵

• Данный способ подойдет для браузеров Opera, а также Chrome.

Ниже мы опишем, как установить этот расширение на примере браузера Google Chrome:

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

• В разделе «Настройки» — «Дополнительные инструменты» — «Расширения» вы можете увидеть, что утилита установлена.

P.S — Убедитесь, что активирован чекбокс «Включить».

Откройте любой ролик и кликните правой кнопкой мыши и заметите, что уже работает Flash-плеер.

При необходимости можно отключить в расширениях disable YouTube html5 player и тогда Flash-плеер снова не будет работать. В браузере Opera процедура аналогична, поэтому описывать ее подробно нет смысла.

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

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

— Веб-технологии для разработчиков

Для встраивания видео контента в документ используйте элемент HTML <video>. Видео элемент может содержать один или несколько источников видео. Чтобы указать источник видео, необходимо использовать атрибут src или элемент <source>; браузер сам определит наиболее подходящий источник.

Для просмотра списка поддерживаемых форматов, перейдите по ссылке Поддерживаемые аудио и видео элементами форматы мультимедийных файлов.

Контекст Использования

Допустимое содержимое. Если элемент имеет атрибут src: 0 или более элементов <track>, за которым следует прозрачный контент, который не содержит элементов мультимедиа: <audio> или <video>
Иначе: 0 или более элементов <source>, за которыми следует 0 или более элементов <track>, затем прозрачным содержимым, которое не содержит элементы мультимедиа: <audio> или <video>.

Content categories	Flow content, содержание фраз, встроенный контент. Если имеет атрибут `controls`: становится интерактивным элементом с осязаемым содержанием.
Tag omission	Нет, открывающий и закрывающий теги обязательны.
Допустимые родительские элементы	Любой элемент, который принимает встроенный контент.
DOM интерфейс	`HTMLVideoElement`

Атрибуты

Как и все HTML элементы, этот элемент поддерживает глобальные атрибуты.

autoplay

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

autobuffer

Логический атрибут; если указано, видео автоматически начнет буферизацию, даже если оно не настроено на автоматический запуск. Используйте этот атрибут только тогда, когда очень вероятно, что пользователь будет смотреть видео. Видео буферизуется до тех пор, пока не заполнится кэш мультимедиа. Примечание: несмотря на то, что в ранних версиях HTML5 атрибут autobuffer присутствовал, в последующих выпусках он был удален. Также он был удален из Gecko 2.0 и других браузеров, а в некоторых никогда не реализовывался. Спецификация определяет новый перечислимый атрибут preload, вместо autobuffer с другим синтаксисом. баг 548523

buffered

Атрибут для определения временных диапазонов буферизованных носителей. Этот атрибут содержит объект TimeRanges.

controls

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

crossorigin

This enumerated attribute indicates whether to use CORS to fetch the related image. CORS-enabled resources can be reused in the <canvas> element without being tainted. The allowed values are:

anonymous: Sends a cross-origin request without a credential. In other words, it sends the Origin: HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header), the image will be tainted, and its usage restricted.
use-credentials: Sends a cross-origin request with a credential. In other words, it sends the Origin: HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the image will be tainted and its usage restricted.

When not present, the resource is fetched without a CORS request (i.e. without sending the Origin: HTTP header), preventing its non-tainted used in <canvas> elements. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.

height

Высота области отображения видео в пикселях.

loop

Логический атрибут; если указан, то по окончанию проигрывания, видео автоматически начнет воспроизведение с начала.

muted

Логический атрибут, который определяет значение по умолчания для аудио дорожки, содержащуюся в видео. Если атрибут указан, то аудио дорожка воспроизводиться не будет. Значение атрибута по умолчанию — «ложь», и это означает, что звук будет воспроизводиться, когда видео воспроизводится.

played

Атрибут TimeRanges, указывающий все диапазоны воспроизводимого видео.

preload

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

none: указывает, что видео не должно быть предварительно загружено.
metadata: указывает, что предварительно загружаются метаданные видео (например, длина).
auto: указывает, что весь видеофайл может быть загружен, даже если пользователь не должен его использовать.
пустая строка: синоним значения auto.

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

Usage notes:

The autoplay attribute has precedence over preload. If autoplay is specified, the browser would obviously need to start downloading the video for playback.
The specification does not force the browser to follow the value of this attribute; it is a mere hint.

poster

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

src

The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed.

width

Ширина области отображения видео в пикселях.

События

The <video> element can fire many different events.

Примеры

<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  Sorry, your browser doesn't support embedded videos, 
  but don't worry, you can <a href="videofile.ogg">download it</a>
  and watch it with your favorite video player!
</video>

<!-- Video with subtitles -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>

The first example plays a video, starting playback as soon as enough of the video has been received to allow playback without pausing to download more. Until the video starts playing, the image «posterimage.jpg» is displayed in its place.

The second example allows the user to choose between different subtitles.

Multiple Sources Example

<video controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg">
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
  Your browser doesn't support HTML5 video tag.
</video>

You can try the preceding example on HTML5 video demo example with live preview code editor.

Server support

If the MIME type for the video is not set correctly on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).

If you use Apache Web Server to serve Ogg Theora videos, you can fix this problem by adding the video file type extensions to «video/ogg» MIME type. The most common video file type extensions are «.ogm», «.ogv», or «.ogg». To do this, edit the «mime.types» file in «/etc/apache» or use the «AddType» configuration directive in httpd.conf.

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

If you serve your videos as WebM, you can fix this problem for the Apache Web Server by adding the extension used by your video files («.webm» is the most common one) to the MIME type «video/webm» via the «mime.types» file in «/etc/apache» or via the «AddType» configuration directive in httpd.conf.

AddType video/webm .webm

Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.

Интерфейс DOM

Этот элемент реализует интерфейс HTMLVideoElement.

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

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	3.0	3.5 (1.9.1)	9.0	10.5	3.1
`autoplay` attribute	3.0	3.5 (1.9.1)	9.0	10.5	3.1
`buffered` attribute	?	4.0 (2.0)	?	(Да)	?
`controls` attribute	3.0	3.5 (1.9.1)	9.0	10.5	3.1
`crossorigin` attribue	?	12.0 (12.0)	?	?	?
`loop` attribute	3.0	11.0 (11.0)	9.0	10.5	3.1
`muted` attribute	30.0	11.0 (11.0)	10.0	(Да)	5.0
`played` property	?	15.0 (15.0)	?	(Да)	?
`poster` attribute	3.0	3.6 (1.9.2)	9.0	10.5	3.1
`preload` attribute	3.0	4.0 (2.0)	9.0	(Да)	3.1
`src` attribute	3.0	3.5 (1.9.1)	9.0	10.5	3.1

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	1.0 (1.0)	?	?	?
`autoplay` attribute	?	1.0 (1.0)	8.1	?	(Да)^[1]
`buffered` attribute	?	4.0 (2.0)	?	?	?
`controls` attribute	?	1.0 (1.0)	?	?	?
`loop` attribute	?	11.0 (11.0)	8.0	?	6.0
`muted` attribute	?	11.0 (11.0)	8.0	?	?
`played` property	?	15.0 (15.0)	?	?	?
`poster` attribute	?	1.0 (1.0)	?	?	?
`preload` attribute	?	4.0 (2.0)	?	?	?
`src` attribute	?	1.0 (1.0)	?	?	?
`crossorigin` attribute	?	12.0 (12.0)	?	?	?

[1] This feature is only available on iOS 6.0.

Смотрите также

Какой бывает HTML5-стриминг (и почему mp4-стриминга не существует)

Нередко клиенты спрашивают, умеет ли наш сервер «mp4-стриминг в HTML5». В 99% случаев спрашивающий не понимает о чём говорит. В этом сложно винить клиентов: из-за путаницы с терминами, технической сложности и большого разнообразия вариантов стриминга запутаться очень легко.

В этой статье мы расскажем, какой бывает HTML5-стриминг, какие варианты хорошие, и почему, чёрт побери, нельзя говорить «mp4-стриминг».

▍Термины

HTML5-видео — это когда вы вставляете в веб-страницу тег <video> и указываете ему какой-то src. HTML5-стриминг — это то же HTML5-видео, но когда в src не готовый файл, а постоянно обновляющийся видеопоток. Ролик на Ютубе — это HTML5-видео, трансляция в Твитче — HTML5-стриминг.

Тегу <video> неважно, как видеопоток формируется и передаётся, и сможет ли браузер его проиграть. Главное, чтобы в src была ссылка на какой-то видеопоток. Говоря техническим языком, спецификация ничего не говорит о том, какие протоколы, транспорты и кодеки поддерживаются в HTML5-видео.

Протокол — это то, как два участника видеосвязи (почти всегда это клиент и сервер) обмениваются данными с целью получения данных. Клиентом называют того, кто приходит к серверу и инициирует сессию связи. Видеопоток может течь от сервера к клиенту (тогда это обычное проигрывание) или от клиента к серверу (тогда это публикация). Даже когда гигантский шкаф, жрущий электричество как многоквартирный дом приходит к маленькой IP-камере, то она будет сервером, а этот шкаф клиентом.

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

Примеры протоколов: RTSP, RTMP, HTTP, HLS, IGMP.

Транспорт, или транспортный контейнер, или контейнер — это то, как сжатое видео упаковывается в байты для передачи от одного участника к другому (по какому-то протоколу).
Примеры контейнеров: MPEG-TS, RTMP, RTP.

Обратите внимание, что RTMP оказался и в протоколах, и в транспортах. Это потому, что в описании RTMP есть спецификация и того, что должны слать друг другу стороны, чтобы видео потекло (т. е. протокол), и того, как упаковывать видео (т. е. транспорт). Так бывает не всегда. Например в протоколе RTSP видео упаковывается в транспорт RTP.

Кодек — многозначный термин. Здесь он означает способ сжать сырое видео. Разница между кодеком и транспортом в том, что кодек — это про подготовку видео, а транспорт — про передачу видео по протоколу. Видео, сжатое одним кодеком, можно пересылать по разными протоколам и разными транспортами. Большинство видеостриминговых серверов не залезают глубже кодированного видео и оперируют только протоколами и транспортами.

Примеры кодеков: h364, aac, mp3.

Из-за того, что термин многозначный, возникает путаница с названиями. Например, H.264 — это стандарт того, как упаковать поток огромных сырых видеокадров в очень мало байтов, libx264 — это библиотека для сжатия по этому стандарту, а ещё есть одноимённый софт под Винду, который умеет декодировать h364 и проигрывать его на экране.

Итак, в спецификации HTML5 не описаны протоколы, транспорты и кодеки. Поэтому авторы браузеров сами выбирают, что поддерживать, а под «HTML5-стримингом» подразумевают разные вещи.

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

▍HLS

HLS — это h364-видео и aac- или mp3-аудио, упакованное в транспорт MPEG-TS. Поток разбивается на сегменты, описанные в m3u8-плейлистах, и раздается по HTTP. HLS поддерживает мультибитрейтные потоки, Live/VOD. Вариант очень простой, но в то же время имеет много деталей, из-за чего на разных устройствах работает по-разному.

Разработали HLS в Эппле, поэтому изначально он работал только в Сафари на iOS и MacOS. Даже Сафари на Windows не умел играть HLS (когда еще была версия под Win).

Тем не менее, сейчас HLS умеют проигрывать все телевизионные приставки и даже почти все устройства на Андроиде.

Но не всё гладко. Производители сторонних плееров плюнули на стандарт Эппла в части донесения разных аудиодорожек и добавили проигрывание всего что есть в обычном MPEG-TS: mpeg2 video, mpeg2 audio и т. п. Из-за этого приходится отдавать разные форматы плейлистов для разных плееров.

▍MPEG-DASH

MPEG-DASH — обычно это h364/h365-видео и aac-аудио, упакованное в транспорт mp4, или vp8/vp9, упакованное в WebM, хотя стандарт и не привязан к конкретным кодекам, протоколам и транспортам. Как и в HLS, поток может разбиваться на сегменты, но это необязательно. Вместо плейлистов — MPD-манифест в XML.

MPEG-DASH во многом похож на HLS. Возможно, он даже популярнее, ведь такие гиганты как Ютуб и Нетфликс уже несколько лет используют его как основной способ раздачи контента.

MPEG-DASH хорош тем, что в большинстве браузеров работает нативно, через MSE (о том, что это такое, — чуть ниже). Для него даже нет реализации на Флеше — это честный, бескомпромиссный HTML5.
Определенно, MPEG-DASH — самый настоящий HTML5-стриминг, за ним будущее.

▍MSE

Когда стало ясно, что Флеш всё-таки умрёт (после сотни ложных похорон), ребром встал вопрос о том, что придёт ему на смену. Хорошо было бы получить в браузерах возможность проигрывать видео по качеству и удобству близко к тому, что умеет Флеш (а он это делает всё-таки хорошо).

Во Флеше давно появился очень удобный механизм для универсального проигрывания разных вариантов — appendBytes. Суть в том, что пользовательский код сам как хочет скачивает кадры сжатого видео, упаковывает в оговоренный контейнер (с Флешем это flv) и засовывает в видеопроигрыватель. Т. е. протокол и транспорт реализуются в пользовательском коде, запускаемом в браузере.

MSE (Media Sources Extensions) — это расширение спецификации HTML5, которое позволяет делать то же, что делает appendBytes во Флеше. К сожалению, MSE намного сложнее как в понимании, так и в реализации.

MPEG-DASH, созданный на его базе, ещё хитрее, поэтому работать с ними то ещё удовольствие: тонны XML, парсинг бинарных контейнеров в Яваскрипте, непродуманные на этапе дизайна вопросы нарезки на сегменты — всё как мы любим, всё что нужно для единой безглючной реализации во всех браузерах.

Интересно, что MSE работает не только с MPEG-DASH, но и с HLS. Существует реализация hls.js, которая скачивает HLS-плейлисты, скачивает MPEG-TS-сегменты, перепаковывает их в нужный для MSE формат и играет через MSE. Эппл даже сделала шаг в сторону совместимости с MPEG-DASH — использование mp4-контейнеров в HLS.

К концу 2017 года Флеш скорее всего умрёт окончательно, и уже сегодня можно смело начинать проект с MPEG-DASH.

▍WebRTC

Во Флеше была сделана годная попытка в одной технологии реализовать и риалтайм-общение, и массовый броадкастинг. К сожалению, в HTML5 так не вышло. Для просмотра трансляций у нас есть MSE, а для видеозвонков — WebRTC.

WebRTC — это SIP в браузере: способ организовать аудио- и видеоканал и канал данных между двумя браузерами при посредничестве сервера.

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

Путаницу в понимании WebRTC вносит его использование в торрент-доставке телевидения. Суть в том, что браузеры через WebRTC организуют сеть каналов данных, а дальше по этой сети раздаются HLS- или MSE-сегменты видео, а проигрывание происходит через Флеш или MSE. Т. е. WebRTC — для доставки, MSE — для проигрывания. Важно не путать это с использованием WebRTC для проигрывания видео.

▍Так что там с mp4-стримингом?

Любой современный браузер скорее всего сможет по протоколу HTTP запросить файл, упакованный в транспорт mp4 и содержащий внутри видео, сжатое кодеком h364/aac. И даже попытаться проиграть его. Это самый удобный, понятный и стандартный вариант проигрывания файлов. Лежит себе файлик на диске, nginx его отдает. Код, проигрывающий mp4 в браузерах достаточно хорош. Например, он умеет даже скачивать куски видео по необходимости (в отличие от Флеш-плеера, который скачивает видео целиком).

Вокруг h364 сложилось немало шумихи по поводу его «закрытости» и «несвободности». Так что есть «открытая» альтернатива, которую форсит Гугл — видеокодеки vp8 и vp9, упакованные в транспорт WebM. WebM — это подмножество транспорта mkv (a. k. a. Матрёшка), который очень похож на mp4 по сути, но отличается от него своей «бинарностью».

Именно отсюда растут ноги у такого явления как «mp4-стриминг», который устроен как WebM. Дело в том что в обычном mp4 в самом начале указывается размер всего контейнера. Поэтому, если мы хотим отдать по обычному mp4 прямой эфир, у нас ничего не получится. А чтобы всё-таки получилось и можно было создавать mp4 без фиксированного конца, придуман следующий ход: сначала пишется mp4 без кадров, а потом в конце подписываются блоками по несколько секунд фрагменты с кадрами. Это называется mp4 fragmented, или mp4 streaming.

По сути это никакой не стриминг, а костыль, позволяющий создать его видимость. Mp4 — отличный формат для скачивания видео, но негодный для стриминга, так что про него можно просто забыть и никогда не использовать термин «mp4-стриминг».

▍Выводы

Хорошие варианты HTML5-стриминга: MPEG-DASH и HLS. Они подходят и для мобильных устройств, и для ПК, и для приставок.
Флеш всё-таки умрет, и MSE уже сейчас занимает его место.
WebRTC — HTML5 технология, в первую очередь, для общения, а не для телевизионного вещания.
Не приносите в веб старые кодеки и не пытайтесь доставлять mp2video и mp2audio по HLS, даже если ваш плеер это умеет.
Никогда не говорите «mp4 стриминг». Пожалуйста.

Готовим HTML5 видео в VLC и подаём с помощью jPlayer / Хабр

Тег HTML5 video, уже поддерживается всеми основными браузерами.

Как видно из таблицы, текущие версии Firefox, Chrome и Opera поддерживают продвигаемый Google открытый WebM, а Safari (включая IOS версию) и IE проприетарный H.264, для остальных же браузеров можно использовать flash плеер, который умеет проигрывать тот же H.264, и таким образом для кроссбраузерности будет достаточно перекодировать видео в эти 2 формата.

В этой небольшой заметке я расскажу как перекодировать видео в эти самые форматы (этот вопрос освещён в интернете на удивление плохо) в VLC плеере и как использовать jPlayer для его кроссбраузерного воспроизведения.

Готовим видео

Скачиваем и устанавливаем VLC (доступен для большинства ОС).

Открываем и жмём Медиа -> Конвертировать / сохранить…, куда добавляем файлы для конвертирования, после чего жмём на кнопку Конвертировать / сохранить и получаем следующий диалог:

Сначала выбираем профиль Video — VP80 + Vorbis (Webm), если нажать на иконку с инструментами, можно задать ширину потока для видео и звука и изменить другие настройки.

После этого можно через обзор выбрать название файла и выходную папку, например test.webm и смело жать кнопку — Начать, так-же можно нажать на галочку Отображать вывод, чтобы наблюдать за процессом.

На выходе получим необходимый файл.

Теперь ту-же самую операцию повторить для H.264 (расширение mp4).

Размещаем видео на странице

Для размещения видео, будем использовать jQuery plugin — jPlayer, лучше скачать архив с примерами (на данный момент актуально — www.jplayer.org/latest/jQuery.jPlayer.2.0.0.demos.zip).

Распаковываем архив, и создадим в его корне страницу test.html с примерно следующим содержимым (вся суть в тегах script): pastebin.com/tmVGyXd2

Так-же копируем в эту папку полученные test.webm и test.mp4 (если хотите чтобы была ещё и картинка превью видео — test.jpg).

Теперь можно закачать всё на веб-сервер (в примере папка называется /jplayer/) и попробовать результат в разных браузерах.

Обязательно пропишите типы содержимого для веб-сервера (например в .htaccess для Apache):
AddType video/mp4 .mp4 AddType video/webm .webm

UPD: ещё инструменты для перекодирования видео

www.mirovideoconverter.com — очень простой и удобный конвертер (правда пожалуй даже слишком простой), основан на ffmpeg.

www.xmedia-recode.de — бесплатный проприентарный для Win, много настроек, очень неплох.

ffmpeg.org (билды для Win hawkeye.arrozcru.org) — я думаю представлять не надо, пример использования:
ffmpeg -i input.avi -acodec libvorbis -ac 2 -ab 96k -ar 44100 -b 345k test.webm ffmpeg -i input.avi -acodec aac -strict experimental -ac 2 -ab 96k -vcodec libx264 -vpre slow -b 345k -f mp4 test.mp4

P.S. Если есть какие-то более удобные способы конвертации — пишите, т.к. этот не лишён недостатков.

Реализация video и audio в HTML5, шаблоны, schema.org микроразметка

В статье описаны строение audio и video контейнера HTML5, теги video, audio, source, track и их атрибуты с возможными значениями. Приведены HTML шаблоны и примеры реализации воспроизведения мультимедийных файлов на основе встроенных в браузер возможностей. Показано подключение к видео текстовой дорожки субтитров, заголовков, оглавления при помощи файлов формата WEBVTT с примерами. Представлены HTML5 шаблоны кода с микроразметкой по schema.org для аудио и видео. Указаны основные для web форматы аудио и видео файлов с их MIME типами и инструменты для конвертации видео и аудио в эти форматы.

В HTML5 присутствуют новые возможности, позволяющие выполнять проигрывание аудио и видео файлов напрямую браузером без использования сторонних программ. Пока, несмотря на то, что HTML5 уже не новость, имеются еще разногласие в том, как браузеры обрабатывают теги video и audio и как отображают сам плеер. Одни это делают все лучше с каждой новой версией, другие пока еще отстают. Глобально же, тенденция идет к тому, что браузеры будут предоставлять все больше функционала для проигрывания мультимедиа файлов.

Скринкаст: Видео обзор этой статьи

Смотреть на YouTube

HTML5 video не поддерживается вашим браузером. Скачать видео

Скринкаст: видео обзор статьи Реализация video и audio в HTML5, шаблоны, schema.org микроразметка на сайте Andew.ru

Автор: Andrey Boldyrev

Скринкаст: Пример использования шаблонов

HTML5 video не поддерживается вашим браузером. Скачать видео

Скринкаст: примеры использования шаблонов из статьи Реализация video и audio в HTML5, шаблоны, schema.org микроразметка — andew.ru

Автор: Andrey Boldyrev

В HTML5 воспроизведение браузером аудио и видео файлов реализуется посредством тегов <audio> и <video>, которые предоставляют управляемый сценариями объект. Использование этих тегов позволяет проиграть мультимедийный файл на web странице, управлять его воспроизведением путем задания атрибутов для тегов <audio> и <video>, и дополнительных, вложенных в них тегов. В простейшем варианте использования достаточно вставить на web страницу нужный вам тег <audio> или <video> и задать через их атрибуты несколько параметров. И это уже позволит проиграть мультимедиа файл на странице в HTML5 плеере. Также, поскольку элементы <audio> и <video> являются объектами для JS, у них доступны свойства, методы и события, что предоставляет расширенные возможности полного управления HTML5 плеером через JavaScript . Однако, ввиду того, что браузеры могут иметь различия в реализации управления объектами аудио и видео посредством JS, то более лучшим выбором для этих целей будет использование специальных кроссбраузерных JS библиотек. Одна из таких библиотек под названием videojs будет описана в отдельном посте. К тегам <audio> и <video>, как и к другим тегам HTML применима стилизация посредством CSS. Детальную спецификацию для аудио и видео в HTML5 можно посмотреть на сайте World Wide Web Consortium .

HTML5 видео и аудио развивающийся стандарт и он не связан ни с одним форматом аудио или видео, поэтому между браузерами существуют различия в поддерживаемых ими форматами аудио и видео файлов. Это различие сейчас компенсируют тем, что кодируют оригинальный файл несколькими разными кодеками и подключают все эти версии файлов к тегам <audio> или <video> через вложенные теги <source src=»URL»>. Однако среди поддерживаемых браузерами форматов аудио и видео файлов намечаются лидеры. Для видео это, конечно же, формат mp4 (H.264), и для аудио это формат mp3 и m4a. Сейчас уже, наверное, все браузеры способны проигрывать файлы этих форматов. Так же, браузеры Firefox, Chrome и Opera договорились поддерживать стандарт WEBM в качестве общего видео формата. С моей точки зрения, оптимальным на сейчас вариантом использования HTML5 видео и аудио будет схема основанная на использовании одного мультимедийного файла в формате mp4(H.264) для видео и m4a для аудио и JS HTML5 плеера. К аудио или видео контейнеру подключается только один файл в указанном формате. Сейчас большинство браузеров способны воспроизводить mp4 формат. Подключенная же JS библиотека выполнит стилизацию встроенного в браузер плеера. Если браузер не будет поддерживать формат mp4/m4a, то JS плеер, в таком случае, реализует подключение Flash плеера для воспроизведения мультимедийного файла. Учитывая, что mp4 формат стал сильно популярен, можно надеяться на низкую вероятность проблем с его воспроизведением в браузерах. Такая схема требует наличие всего одного мультимедийного файла в указанном формате, что экономит место на диске и ресурсы для обработки файлов. Также, такая схема будет стратегически более правильной, так как тенденция идет к тому, что браузеры все больше и лучше выполняют реализацию HTML5 видео и аудио.

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

Форматы файлов и их MIME типы

Файлы мультимедиа	Расширения	Mime тип
Аудио mp3	mp3	audio/mpeg
Аудио mp4	m4a	audio/mp4
Аудио webm	webm	audio/webm
Аудио ogg	ogg	audio/ogg
Видео mp4 (H.264)	mp4	video/mp4
Видео webm	webm	video/webm
Видео ogg	ogv	video/ogg

Инструменты кодирования аудио и видео файлов

Для кодирования видео и аудио файлов в приведенные выше web форматы можно воспользоваться открытой программой Miro Video Converter , которая поддерживает конвертацию аудио и видео файлов в основные распространенные для веба форматы (MP4, WebM, Ogg Theora, MP3 и т.п.). Miro Video Converter доступен для разных операционных систем — Windows, Mac и Linux и является графической оболочкой для консольных утилит ffmpeg и ffmpeg2theora , которые удобно использовать на web сервере для обработки загружаемого видео и аудио в автоматическом режиме.

Пример стандартного использование HTML5 тега <audio>:

HTML5 код примера audio с микроразметкой schema.org:

<div itemscope itemtype="http://schema.org/AudioObject">

    <h4 itemprop="name">Заголовок аудио</h4>
    <meta itemprop="description" content="Описание аудио...">

<!-- additional schema.org data -->    
    <meta itemprop="isFamilyFriendly" content="true">
    <meta itemprop="encodingFormat" content="mp3">
    <meta itemprop="duration" content="PT04M59S">
    <meta itemprop="uploadDate" content="2015-12-31">
    <meta itemprop="image" content="Full URL to image.jpg">
    <meta itemprop="alternateName" content="Альтернативный заголовок аудио">
<!-- end of additional data -->

    <audio controls preload="none">
            <source src="URL to file.mp3" type="audio/mpeg" />
            <source src="URL to file.ogg" type="audio/ogg" />      
            <source src="URL to file.m4a" type="audio/mp4" />
            
        <p>HTML5 audio не поддерживается вашим браузером.</p>
        <p><a itemprop="contentUrl" href="URL to file.mp3">Скачать audio</a></p>
    </audio>

    <p itemprop="author" itemscope itemtype="http://schema.org/Person">
        Автор
        <a href="URL" itemprop="url"><span itemprop="name">Имя автора</span></a>
        <meta itemprop="image" content="Full url to person.jpg">
    </p>

</div>

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

audioobject

    itemType = http://schema.org/AudioObject
    name = Заголовок аудио
    description = Описание аудио...
    isfamilyfriendly = true
    encodingformat = mp3
    duration = PT04M59S
    uploaddate = 2015-12-31
    image = Full URL to image.jpg
    alternatename = Альтернативный заголовок аудио
    contenturl
        href = URL to file.mp3
        text = Скачать audio
    author
        person
            itemType = http://schema.org/Person
            url
                href = URL
                text = Имя автора
            name = Имя автора
            image = Full url to person.jpg

Минимальная разметка аудио по schema.org должна включать itemprop=»name», itemprop=»description», itemprop=»contentUrl». Остальные свойства не являются обязательными.

Пример стандартного использование HTML5 тега <video>:

В демонстрации я применил для тега <video> через атрибут class CSS стили, делающие ширину области видео динамической в зависимости от размера экрана. По высоте плеер подстроиться сам. Попробуйте изменить размер окна браузера для того, что бы увидеть как это работает. Поэтому в источнике кода этой демонстрации нет атрибутов width и height для тега <video>, их заменяют CSS стили. Но в листинге кода шаблона этот примем не показан, т.к. является уже частностью.

HTML5 код примера video с микроразметкой schema.org:

<div itemscope itemtype="http://schema.org/VideoObject">

    <h4 itemprop="name">Заголовок видео</h4>
    
    <div itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
       <img itemprop="contentUrl" src="URL to video-thumbnail.jpg|png" />
       <meta itemprop="width" content="100">
       <meta itemprop="height" content="100">
    </div>
    
    <p><a href="URL">Смотреть на YouTube</a></p>
    
    <meta itemprop="duration" content="PT14M59S">
    <meta itemprop="isFamilyFriendly" content="true">
    <meta itemprop="uploadDate" content="2015-12-31">
    <meta itemprop="description" content="Краткое описание для видео...">
    
    <video controls preload="none" poster="URL to video-poster.jpg|png">
        <source src="URL to file.mp4" type="video/mp4" />
        <source src="URL to file.webm" type="video/webm" />
        <source src="URL to file.ogv" type="video/ogg" />

        <track kind="subtitles" label="RU" src="URL to subtitles-ru.vtt" srclang="ru" default>
        <track kind="subtitles" label="EN" src="URL to subtitles.vtt" srclang="en">
        
        <p>HTML5 video не поддерживается вашим браузером.</p>
        <p>Скачать видео: <a itemprop="url" href="URL to file.mp4">Заголовок видео</a></p>
    </video>
    
    <p itemprop="author" itemscope itemtype="http://schema.org/Person">
        Автор видео  
        <a itemprop="url" href="URL to author web page"><span itemprop="name">author name</span></a>
        <meta itemprop="image" content="Full URL to author.jpg">
    </p>
    
    <img itemprop="thumbnailUrl" src="URL to file.jpg|png" />

</div>

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

videoobject

    itemType = http://schema.org/VideoObject
    name = Заголовок видео
    thumbnail
        imageobject
            itemType = http://schema.org/ImageObject
            contenturl = URL to video-thumbnail.jpg|png
            width = 100
            height = 100
    duration = PT14M59S
    isfamilyfriendly = true
    uploaddate = 2015-12-31
    description = Краткое описание для видео...
    url
        href = URL to file.mp4
        text = Заголовок видео
    author
        person
            itemType = http://schema.org/Person
            url
                href = URL to author web page
                text = author name
            name = author name
            image = Full URL to author.jpg
    thumbnailurl = URL to file.jpg|png

Минимально необходимая для поисковиков разметка видео по schema.org должна включать все приведенные в коде примера свойства itemprop за исключением блока itemprop=»author», который является не обязательным для поисковиков и его можно удалить, если нет данных для его заполнения. Для video-thumbnail яндекс требует указывать микроразметку по schema.org как itemprop=»thumbnail» в виде ImageObject, а Google требует указывать как itemprop=»thumbnailUrl», поэтому приходиться вставлять video-thumbnail файл два раза, и поэтому второй тег img получил стиль display: none, что бы не отображаться в браузере. Можно вместо использования img тега с display:none передать это свойство тегом link через атрибут href. Также, несмотря на то, что микроразметку можно передавать через не показываемые пользователю теги meta и link, рекомендуется все же, по возможности, добавлять микроразметку преимущественно в теги, которые будут выводиться пользователю. Валидацию микроразметки schema.org можно сделать по этим ссылкам: yandex валидатор , google валидатор . Основное преимущество от использования микроразметки заключается в удобстве такого контента для поисковых роботов и роботов социальных сетей. Эти роботы извлекают размеченные данные и агрегирую их. Поэтому использование микроразметки улучшает SEO сайта и способствует автоматическому распространению данных в социальных сетях. Детальное описание микроразметки Schema.org для видео размеченных схемой VideoObject на сайте Яндекса в разделе Вебмастер . Так же, стоит заметить, что для случаев, когда вы делаете вставку на свой сайт видео не напрямую, а с помощью виджетов видео хостинга Яндекс.Видео или YouTube, то вы можете под блоком кода виджета добавить свой блок кода HTML с описанием видео и в него встроить микроразметку Schema.org для этого видео. При этом, в качестве параметра URL — ссылки на видеоролик, указать не прямую ссылку на статический файл, а задать ссылку полученную от видео хостинга. Хотя в спецификации Schema.org и написано, что ссылка должна быть именно на прямой файл, но поисковики обрабатывают и ссылки на видео от видео хостинга (см. в примерах на сайте Яндекса в разделе Вебмастер), несмотря на то, что по такой ссылке нельзя скачать файл и нельзя просмотреть его напрямую в своем HTML5 медиа плеере на странице, только в виджете видео хостинга.

Если перед вами стоит вопрос с какого хостинга загружать мультимедийные файлы аудио и видео, то посмотрите статью Yandex Disk REST API jQuery Plugin, в которой описан вариант вставки медиа файлов на WEB страницу с Яндекс Диска.

Атрибуты <audio> и <video> тегов:

Атрибуты src, preload, autoplay, mediagroup, loop, muted, controls являются общими атрибутами для всех медийных элементов, в том числе и для тегов <audio> и <video>.

атрибут autoplay:

<audio autoplay> или <audio autoplay="autoplay">
<video autoplay> или <video autoplay="autoplay">

атрибут autoplay задается его присутствием в теге <audio> или <video> и для этого атрибута не нужно задавать значение, достаточно просто его присутствия. Для редакторов HTML, которые правят код элементов, можно задать этот атрибут как autoplay=»autoplay«, что равносильно просто присутствию атрибута. Наличие атрибута autoplay дает команду браузеру начать воспроизведение файла сразу после загрузки web страницы. Соответственно, атрибут autoplay отменяет значения атрибута preload, который управляет загрузкой видео в плеер, потому что видео должно сразу начать воспроизводиться, а значит и должно быть загружено. По умолчанию атрибут autoplay отсутствует.

атрибут controls:

<audio controls> или <audio controls="controls">
<video controls> или <video controls="controls">

атрибут controls дает команду браузеру показывать панель управления плеером, когда страница загрузилась, но воспроизведение записи на начато. Этот атрибут также как и атрибут autoplay задается только присутствием в теге <audio> или <video>, и не требует значения, достаточно только его присутствия. По умолчанию этот атрибут отсутствует, т.е. плеер не показывает панель управления до начала воспроизведения. Когда же проигрывание файла будет запущено, то панель управления будет появляться при наведении указателя мыши на область плеера.

атрибут loop:

<audio loop> или <audio loop="loop">
<video loop> или <video loop="loop">

атрибут loop заставляет плеер воспроизводить файл по кругу. Атрибут задается только его присутствием в теге <audio> или <video> и не имеет параметров. По умолчанию атрибут loop отсутствует.

атрибут preload:

<audio preload="none | metadata | auto">
<video preload="none | metadata | auto">

атрибут preload определяет загрузку файла вместе с загрузкой web страницы и принимает одно из следующих трех значений:
- none — не выполнять загрузку файла вместе с загрузкой web страницы. Это значит, что файл начнет загружаться в плеере только после нажатия кнопки воспроизведения. Это может быть удобным для ускорения загрузки страницы. Значение none является значением по умолчанию для атрибута preload, поэтому для него можно вообще не вставлять атрибут preload в тег <audio> или <video> для этого случая.
- metadata — не выполнять загрузку файла вместе с загрузкой web страницы, но выполнять загрузку метаданных мультимедийного файла.
- auto — выполнять полную загрузку файла вместе с загрузкой web страницы. В этом варианте браузеры будут автоматически подгружать медийный файл вместе с web страницей, но это не будет мешать загрузке самой страницы и ее отрисовки в браузере. Если в теге <audio> или <video> задан атрибут preload=«» с пустым значением, то будет использовано значение auto для него.
- Значение атрибута preload будет отменено, если использован атрибут autoplay.

атрибут src:

<audio src="URL">
<video src="URL">

атрибут src тега <audio> или <video> позволяет сразу в теге задать путь к мультимедийному файлу. Путь может быть, как полным с указанием протокола и домена, так и относительно корня текущего сайта. Также путь к файлу можно задать и во вложенных в аудио или видео контейнер тегах <source src=»URL»>.

Атрибут poster тега video:

<video poster="URL">

атрибут poster используется только в теге <video> и задает URL изображения (gif, png, jpeg и т.п.), которое будет показано пока видео не доступно. Если атрибут poster не задан, то плеер браузера будет пытаться показать первый кадр видео.

Атрибуты width и height тега video:

<video>
<video>

атрибуты width и height применяются только к тегу <video> и задают, соответственно, ширину и высоту области воспроизведения видеоплеера. В качестве значения ожидают положительное целое число, указанное в пикселях или процентах. Задание этих атрибутов влияет на размер отображения видео, но не изменяет пропорции видео. Видео подстроиться под указанные размеры с сохранением его пропорций. Если указанные размеры не совпадают с пропорциями видео, то по верхним или/и по боковым краям видео будут темные полосы. Поэтому при задании этих параметров желательно подбирать их соотношение такое же, как у воспроизводимого видео, или задавать только width, а по высоте плеер подстроиться сам.
Если какой-либо из этих параметров или оба не будут заданы, то тогда не заданный(е) параметр(ы) будут браться от соответствующего размера картинки, указанной в атрибуте poster.
Если же атрибут poster будет отсутствовать, то эти параметры будут устанавливаться как: для width = 300px и для height = 150px. Что бы не высчитывать и не согласовывать размеры области видео под пропорции самого клипа, я бы рекомендовал задавать только одни параметр width, тогда высота (height) области воспроизведения будет выбрана автоматически исходя из пропорций видео.
Также, на размеры и оформление HTML5 плеера можно влиять через свойства CSS применяемые к тегам <audio> или <video>.

Атрибут muted:

<audio muted> или <audio muted="muted">
<video muted> или <video muted="muted">

атрибут muted устанавливает своим наличием в тегах <audio> или <video> звук в выключенное состояние в HTML5 плеере. По умолчанию атрибут отсутствует.

Атрибут crossorigin:

<video crossorigin="anonymous">

атрибут crossorigin указывает браузеру на необходимость выполнение CORS запроса для данного элемента. По умолчанию атрибут отсутствует, что значит не использовать CORS запросы вообще. При наличии атрибута возможны следующие значения: anonymous и use-credentials. CORS (Cross-origin resource sharing ) — это технология современных браузеров, которая позволяет управлять разрешениями на загрузку ресурсов на текущей web странице с других доменов, отличных от домена текущей страницы. Поддержка браузерами стандарта CORS позволяет реализовать безопасный кроссдоменный обмен данными через выполнение специального запроса (заголовка) к домену текущей страницы на предмет того, разрешается ли загружать на этой странице ресурсы с другого указанного домена. Сервер на такой запрос должен указать домены, с которых разрешена загрузка ресурсов.

Атрибут mediagroup:

<article>

 <style scoped>
  div { margin: 1em auto; position: relative; width: 400px; height: 300px; }
  video { position; absolute; bottom: 0; right: 0; }
  video:first-child { width: 100%; height: 100%; }
  video:last-child { width: 30%; }
 </style>

 <div>
  <video src="movie.vid#track=Video&track=English" autoplay controls mediagroup=movie></video>
  <video src="movie.vid#track=sign" autoplay mediagroup=movie></video>
 </div>

</article>

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

Теги <audio> и <video> требуют наличие закрывающего тега.

Для тех случаев, когда браузер не поддерживает HTML5 <audio> и <video> теги, что сейчас большая редкость, пред закрывающим контейнер тегом пишут текстовое сообщение и обычно добавляют ссылку на скачивание файла. Если же встроенный в браузер HTML5 плеер будет дополнительно управляться JS библиотекой (JS плеером), то большинство из них выполняют подключение флэш плеера в случае невозможности воспроизведения в браузере HTML5 видео и аудио по причине не поддержки браузером тегов видео и аудио или формата мультимедийного файла.

Тег <source>:

Путь к проигрываемому файлу также можно задать и при помощи тега <source src=»URL»> с атрибутом src, размещенного внутри тегов <audio> или <video>. Тег <source> не имеет закрывающего тега.

В большинстве случаев тег <source>выглядит так:

<source src="URL to file.mp4" type="video/mp4">
<source src="URL to file.mp3" type="audio/mpeg">

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

Атрибуты тега <source>:

атрибут src=«URL» тега <source> задает URL к мультимедийному файлу. Путь может быть как полным с указанием протокола и домена, так и относительно корня сайта.
атрибут type=»MIME-тип» тега <source> или более полно type=’MIME-тип; codecs=»кодек»‘ указывает MIME-тип файла и кодек. Для аудио достаточно указать MIME-тип, например, для .mp3 — type=»audio/mpeg». Хотя по спецификации для видео в атрибуте type нужно указывать и кодек, но сейчас часто указывают только MIME-тип без кодека, предоставляя это на решение браузерам.
атрибут media=»all|braille|handheld|print|screen|speech|projection|tty|tv» тега <source> указывает тип устройства, для которого должен воспроизводиться файл. Значение по умолчанию all, поэтому этот атрибут в большинстве случаев не указывают вообще, если не хотят конкретно определить устройство для воспроизведения.

Тег <track>:

Для HTML5 видео возможно также отображать в плеере дополнительную дорожку с информацией, такой как субтитры (subtitles), заголовки (captions), главы (chapters), описания (descriptions – не поддерживаются пока) и метаданные (metadata – не поддерживаются пока). Эта возможность реализуется путем добавления внутри тега <video> тегов <track> с соответствующими атрибутами.

<track kind | src | srclang | label | default> - не имеет закрывающего тега.

Тег <track> позволяет подключать к видео дополнительные файлы-дорожки специального формата WebVTT (Web Video Text Tracks Format ), в которых указаны выводимые текстовые сообщения с их временной привязкой к видео файлу. Стандарт WebVTT поддерживает не просто вывод текстовых сообщений, но и предоставляет варианты его CSS стилизации и опции по размещению в области просмотра видео. На настоящий момент WebVTT файлы в основном используются для подключения к видео текстовых субтитров, что поддерживается почти всеми браузерами. Другие возможности WebVTT стандарта пока не полностью реализуются самими браузерами, поэтому, для более полного использования WebVTT, лучше применять JS плееры. Также, файлы WebVTT могут нестандартно использоваться JS плеерами для передачи дополнительных данных в JS плеер, таких как, например, URL превью картинок для фреймов видео. К вопросу о том, как показать превью кадров видео на шкале перемотки плеера (Scrub Bar Thumbnails) как это сделано на видео хостингах. Тут нужно сказать, что такой функционал пока отсутствует во встроенных в браузеры плеерах и поэтому реализуется через JS плееры как дополнение. Для этого подключают JS библиотеку (js плеер), которая берет на себя управление HTML5 видео и аудио объектом и выполняет его стилизацию. Такие JS плееры для показа превью кадров видео нестандартно используют файлы WEBVTT из тега <track> для передачи через него URL картинок превью.

Файл формата WebVTT является обычным текстовым файлом с расширением .vtt в котором, в виде построчного списка, прописаны временные метки с временем старта и временем окончания и текстовые сообщения для вывода к этим меткам. К <video> контейнеру можно подключить несколько файлов WebVTT с текстом на разных языках. Для каждого языка нужно создавать отдельный файл и подключать каждый через тег <track>. Теги <track> необходимо вставлять внутрь контейнера <video> после всех тегов <source>, но перед сообщениями об ошибках HTML5 видео. Тег <track> с файлом субтитров на языке по умолчанию нужно размешать первым среди тегов <track> в текущем контейнере <video>.

WEBVTT файл может содержать одну и более временных меток. Файл начинается со слова WEBVTT. Пустые строки отделяют между собой временные метки с принадлежащими к ним текстом и атрибутами. Текст может содержать элементы HTML и CSS разметки. Перед временной меткой может располагаться ID для нее, что бы при помощи специальных выражений обратиться к ней. Все эти детали описаны в стандарте WEBVTT.

00:00:01.000 —> 00:00:10.000 -это простой пример временной метки в формате hh:mm:ss.mmm

00:00:15.000 —> 00:00:20.000 A:middle T:50% — метка может содержать дополнительные атрибуты, указывающие на месторасположение текста для нее в области просмотра видео.

Пример файла формата WEBVTT для субтитров на ru

WEBVTT

00:00:01.000 --> 00:00:10.000
Это первая строка с 1-10 секунды

00:00:15.000 --> 00:00:20.000
Это вторая строка текста
разделенная на две линии

Пример файла subtitles.vtt

Пример файла captions.vtt

Пример файла chapters.vtt

Атрибуты тега <track>:

Атрибут kind тега <track> задает тип дорожки и может принимать значения:

subtitles — субтитры в виде текста, который выводиться поверх видео. Для проигрываемого файла можно задать субтитры на разных языках для предоставления их выбора в плеере, если он его поддерживает. В большинстве случаев используется именно этот тип так он поддерживается большинством браузеров.
captions – заголовки в виде текста и звука, которые выводятся поверх видео. Похожи на субтитры, но, помимо текста, могут включать звуковые эффекты и другую аудио информацию.
chapters – главы, которые отображаются текстом в виде меню списка и предназначены для быстрой навигации по медиафайлу.
descriptions – описание, это текстовые файлы с описанием видео для воспроизведения их в screenreader.
metadata – метаданные для передачи js скриптам.

Атрибут src тега <track> задает URL к файлу дорожки с дополнительной информацией. Подключаемый к тегу <track> файл имеет формат WebVTT и расширение .vtt.

Атрибут srclang тега <track> задает язык дорожки через код языка. Для русского языка будет равен «ru», для английского «en».

Атрибут label тега <track> задает название дорожки, которое будет показано в плеере. Если атрибут не будет задан, то браузер покажет свое служебное название.

Атрибут default тега <track> задает выбор данной дорожки по умолчанию при наличии других дорожек в контейнере video. Только один из нескольких тегов <track> может иметь default атрибут. Лучше дорожку по умолчанию располагать первой среди других подключаемых дорожек.

Пример тегов <track>:

<track kind="subtitles" label="EN" src="URL to subtitles.vtt" srclang="en" default>
<track kind="subtitles" label="RU" src="URL to subtitles-ru.vtt" srclang="ru">

HTMLVideoElement — Веб-технологии для разработчиков

HTMLVideoElement интерфейс приложения свойства и методы для манипулирования видео объектов. Он также наследует и методы HTMLMediaElement и HTMLElement .

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

 a: наведите текст {fill: # 0095DD; указатель-события: все;}

Свойства

Наследует свойства от своего родительского объекта, HTMLMediaElement и HTMLElement .

HTMLVideoElement.height: — это DOMString , который отражает HTML-атрибут height , который определяет высоту области отображения в пикселях CSS.
HTMLVideoElement.poster: — это DOMString , который отражает атрибут HTML poster , который указывает изображение, которое нужно показать, пока нет видеоданных.
HTMLVideoElement.videoHeight Только для чтения: Возвращает unsigned long , содержащий внутреннюю высоту ресурса в пикселях CSS с учетом размеров, соотношения сторон, чистой апертуры, разрешения и т. Д., Как определено для формата, используемого ресурсом.Если состояние готовности элемента HAVE_NOTHING , значение равно 0 .
HTMLVideoElement.videoWidth Только для чтения: Возвращает unsigned long , содержащее внутреннюю ширину ресурса в пикселях CSS с учетом размеров, соотношения сторон, чистой апертуры, разрешения и т. Д., Как определено для формата, используемого ресурсом. Если состояние готовности элемента HAVE_NOTHING , значение равно 0 .
HTMLVideoElement.width: — это DOMString , который отражает атрибут HTML width , который определяет ширину области отображения в пикселях CSS.

Gecko-специфичные свойства

HTMLVideoElement.mozParsedFrames Только для чтения: Возвращает длинное число без знака со счетчиком видеокадров, которые были проанализированы из медиаресурса.
HTMLVideoElement.mozDecodedFrames Только для чтения: Возвращает длинное число без знака со счетчиком проанализированных видеокадров, которые были декодированы в изображения.
HTMLVideoElement.mozPresentFrames Только для чтения: Возвращает long без знака со счетчиком декодированных кадров, которые были представлены конвейеру рендеринга для рисования.
HTMLVideoElement.mozОкрашенные Рамки Только для чтения: Возвращает беззнаковых длинных с количеством представленных кадров, которые были нарисованы на экране.
HTMLVideoElement.mozFrameDelay Только для чтения: Возвращает double со временем задержки последнего нарисованного видеокадра в секундах.
HTMLVideoElement.mozHasAudio Только для чтения: Возвращает Boolean , указывающее, есть ли какой-то звук, связанный с видео.

Методы

Наследует методы от своего родителя, HTMLMediaElement и HTMLElement .

HTMLVideoElement.getVideoPlaybackQuality (): Возвращает объектов VideoPlaybackQuality , которые содержат текущие показатели воспроизведения.

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

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

Элемент	Хром	Firefox (Gecko)	Internet Explorer	Opera	Safari
Базовая опора	(Да)	4.0 (2,0)	9,0	10,50	(Да)
`mozParsedFrame mozDecodedFrame mozPresentFramemozОкрашенныйFramemozFrameDelay`	Нет	5,0 (5,0)	Нет	Нет	Нет
`mozHasAudio`	Нет	15,0 (15,0)	Нет	Нет	Нет
`getVideoPlaybackQuality ()`	?	25.0 (25,0) ^[1]	?	?	?

Элемент	Android	Firefox Mobile (Gecko)	IE мобильный	Opera Mobile	Safari Mobile
Базовая опора	(Да)	4,0 (2,0)	9,0	(Да)	(Да)
`mozParsedFrame mozDecodedFrame mozPresentFramemozОкрашенныйFramemozFrameDelay`	Нет	5.0 (5,0)	Нет	Нет	Нет
`mozHasAudio`	Нет	15,0 (15,0)	Нет	Нет	Нет
`getVideoPlaybackQuality ()`	?	25,0 (25,0) ^[1]	?	?	?

[1] Gecko реализует это на носителе .mediasource.enabled , по умолчанию false .

См.также

— Веб-технологии для разработчиков

Для встраивания видео в документ використовуйте элемент HTML. Видео элемент может содержать один или несколько источников видео. Чтобы указать источник видео, необходимо использовать атрибут src или элемент ; браузер сам определит наиболее подходящий источник.

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

Применение Использование

Допустимое содержимое. Если элемент имеет атрибут src : 0 или более элементов , за которым следует прозрачный контент, который не содержит элементов мультимедиа: или
Иначе: 0 или более элементов < source> , за что следует 0 или более элементов , затем прозрачным содержимым, которое содержит элементы мультимедиа: или .

Категории содержимого	Flow content, содержание фраз, встроенный контент. Если имеет атрибут `Controls` становится интерактивным элементом с осязаемым содержанием.
Отсутствие тега	Нет, открывающий и закрывающий теги обязательны.
Допустимые родительские элементы	Любой элемент, принимает который встроенный контент.
DOM интерфейс	`HTMLVideoElement`

Атрибуты

Как и все элементы HTML, этот элемент поддерживает глобальные атрибуты.

автозапуск

Логический атрибут; если указан, то видео начнется автоматически, как только это будет возможно сделать без остановки, чтобы закончить загрузку данных.

автоматический буфер

Логический атрибут; если указано, видео автоматически начинается буферизацию, даже если оно не настроено на автоматический запуск. Используйте этот атрибут только тогда, когда очень вероятно, что пользователь будет смотреть видео.Видео буферизуется до тех пор, пока не заполнится кэш мультимедиа. Примечание: несмотря на то, что в ранней версиих HTML5 атрибут autobuffer присутствовал, в выпусках он был удален. Также он был удален из Gecko 2.0 и других браузеров, а в некоторых никогда не реализовывался. Укажите новый перечислимый атрибут preload , вместо autobuffer с другими синтаксисом. баг 548523

с буферизацией

Атрибут для определения временных диапазонов буферизованных носителей.Этот атрибут содержит объект TimeRanges .

органы управления

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

перекрестное происхождение

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

аноним: Отправляет запрос на другой источник без учетных данных. Другими словами, он отправляет HTTP-заголовок Origin: без cookie, сертификата X.509 или выполнения базовой проверки подлинности HTTP. Если сервер не предоставляет учетные данные исходному сайту (не задавая HTTP-заголовок Access-Control-Allow-Origin: ), изображение будет испорченным , и его использование будет ограничено.
учетные данные: Отправляет запрос на другой источник с учетными данными. Другими словами, он отправляет HTTP-заголовок Origin: с файлом cookie, сертификатом или выполняет аутентификацию HTTP Basic. Если сервер не предоставляет учетные данные исходному сайту (через HTTP-заголовок Access-Control-Allow-Credentials: ), изображение будет испорчено и его использование будет ограничено.

Если он отсутствует, ресурс выбирается без запроса CORS (т.е.е. без отправки HTTP-заголовка Origin: ), предотвращая его использование в элементах без заражения. Если он недопустим, он обрабатывается так, как если бы использовалось перечисленное ключевое слово анонимный . Для получения дополнительной информации см. Атрибуты настроек CORS.

высота

Высота области отображения видео в пикселях.

петля

Логический атрибут; если указан, то по окончанию проигрывания, видео автоматически начинается воспроизведение с начала.

без звука

Атрибут, который определяет значение Логания для аудио дорожки, содержащуюся в видео. Если атрибут указан, то аудио дорожка воспроизводиться не будет. Значение атрибута по умолчанию — «ложь», что означает, что звук будет воспроизводиться, когда видео воспроизводится.

играл

Атрибут TimeRanges , указывающий все диапазоны воспроизводимого видео.

предварительная нагрузка

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

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

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

Примечания по использованию:

Атрибут autoplay имеет приоритет над preload . Если указано autoplay , браузеру, очевидно, потребуется начать загрузку видео для воспроизведения.
Спецификация не заставляет браузер следить за значением этого атрибута; это всего лишь намек.

плакат

Используется URL-адрес, указывающий на постера, которое будет использовано, пока загружается видео или пока пользователь не нажмет на кнопку воспроизведения.Этот атрибут не указан, ничего не отображается до тех пор, пока не будет доступен первый кадр; то первый кадр как рамка постера.

SRC

URL-адрес видео для встраивания. Это необязательно; вместо этого вы можете использовать элемент в видеоблоке, чтобы указать видео для встраивания.

ширина

Ширина области отображения видео в пикселях.

События

Элемент может запускать множество различных событий.

Примеры

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

Второй пример позволяет пользователю выбирать между различными субтитрами.

Пример нескольких источников

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

Серверная поддержка

Если тип MIME для видео установлен неправильно на сервере, видео может не отображаться или отображать серое поле, содержащее X (если включен JavaScript).

Если вы используете веб-сервер Apache для обслуживания видео Ogg Theora, вы можете решить эту проблему, добавив расширения типа видеофайла к типу MIME «video / ogg». Наиболее распространенные расширения типов видеофайлов — это «.ogm», «.ogv» или «.ogg». Для этого отредактируйте файл «mime.types» в «/ etc / apache» или используйте конфигурационную директиву «AddType» в httpd.conf.

 AddType video / ogg .ogm
Добавить тип видео / ogg .ogv
Добавить тип видео / ogg .ogg

Если вы обслуживаете свои видео как WebM, вы можете решить эту проблему для веб-сервера Apache, добавив расширение, используемое вашими видеофайлами («.webm »является наиболее распространенным) в тип MIME« video / webm »через файл« mime.types »в« / etc / apache »или через директиву конфигурации« AddType »в httpd.conf.

 AddType video / webm .webm

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

Интерфейс DOM

Этот элемент реализует интерфейс HTMLVideoElement .

Совместимость

Элемент	Хром	Firefox (Gecko)	Internet Explorer	Opera	Safari
Базовая опора	3.0	3,5 (1,9,1)	9,0	10,5	3,1
`автозапуск` атрибут	3,0	3,5 (1,9,1)	9,0	10,5	3,1
`с буферизацией` атрибут	?	4,0 (2,0)	?	(Да)	?
`элементы управления` атрибут	3.0	3,5 (1,9,1)	9,0	10,5	3,1
`перекрестное происхождение` атрибут	?	12,0 (12,0)	?	?	?
`петля` атрибут	3,0	11,0 (11,0)	9,0	10,5	3,1
`без звука` атрибут	30.0	11,0 (11,0)	10,0	(Да)	5,0
`играл` недвижимость	?	15,0 (15,0)	?	(Да)	?
`плакат` атрибут	3,0	3,6 (1,9,2)	9,0	10,5	3,1
`предварительная нагрузка` атрибут	3.0	4,0 (2,0)	9,0	(Да)	3,1
`src` атрибут	3,0	3,5 (1,9,1)	9,0	10,5	3,1

Элемент	Android	Firefox Mobile (Gecko)	IE мобильный	Opera Mobile	Safari Mobile
Базовая опора	?	1.0 (1,0)	?	?	?
`автозапуск` атрибут	?	1,0 (1,0)	8,1	?	(Да) ^[1]
`с буферизацией` атрибут	?	4,0 (2,0)	?	?	?
`элементы управления` атрибут	?	1.0 (1,0)	?	?	?
`петля` атрибут	?	11,0 (11,0)	8,0	?	6,0
`без звука` атрибут	?	11,0 (11,0)	8,0	?	?
`играл` недвижимость	?	15,0 (15.0)	?	?	?
`плакат` атрибут	?	1,0 (1,0)	?	?	?
`предварительная нагрузка` атрибут	?	4,0 (2,0)	?	?	?
`src` атрибут	?	1,0 (1,0)	?	?	?
`crossorigin` атрибут	?	12.0 (12,0)	?	?	?