Html video тег: Тег | htmlbook.ru

Содержание

HTML тег video

Тег <video> позволяет в браузере проигрывать видео файлы.

В настоящее время поддерживается три видео формата — MP4, WEBM, OGG.

БраузерMP4WEBMOGG
Internet ExplorerДаНетНет
ChromeДаДаДа
FirefoxДаДаДа
SafariДаНетНет
OperaДаДаДа

  • MP4 = h356 видео кодек + AAC аудио кодек
  • WEBM = VP8 видео кодек + Vorbis аудио кодек
  • OGG = Theora видео кодек + Vorbis аудио кодек

Любой текст между тегами <video> и </video> будет отображен в том случае, если тег <video> не поддерживается браузером.

MIME-типы для видео форматов

ФорматMIME-тип
MP4video/mp4
WEBMvideo/webm
OGGvideo/ogg

Разница между HTML 4.01 и HTML5

Тег <video> был добавлен в HTML5.

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

АтрибутОписание
autoplayАвтоматически запускает медиа-файл на воспроизведение
controlsВключает элементы управления воспроизведением видеофайла
heightОпределяет высоту области отображения видео
loopВключает бесконечный цикл воспроизведения видеофайла
mutedОтключает звук у видеофайла
posterОпределяет URL изображения заставки видеофайла
preload
Определяет, следует ли загружать видеофайл во время загрузки страницы
srcОпределяет URL видеофайла
widthОпределяет ширину видеоплеера

Общие атрибуты

Тег <video> поддерживает общие атрибуты и атрибуты-события.

HTML пример использования

Проигрываем видео файл:


<video controls>
   <source src='movie.mp4' type="video/mp4">
   <source src='movie.ogg' type="video/ogg">
   Ваш браузер не поддерживает тег video.
</video>

HTML и CSS с примерами кода

Тег <video> (от англ. video — видео) добавляет, воспроизводит и управляет настройками видеоролика на веб-странице.

Путь к файлу задаётся через атрибут src

или вложенный элемент <source>. Список поддерживаемых браузерами аудио и видеокодеков ограничен.

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

Изображения и мультимедиа

Синтаксис

<video>
  <source src="<адрес>" />
</video>

Закрывающий тег обязателен.

Атрибуты

autoplay
Видео начинает воспроизводиться автоматически после загрузки страницы.
buffered
Атрибут для определения временных диапазонов буферизованных носителей. Этот атрибут содержит объект TimeRanges.
controls
Добавляет панель управления к видеоролику.
crossorigin
Этот атрибут указывает, следует ли использовать CORS для извлечения связанного изображения.
height
Задаёт высоту области для воспроизведения видеоролика.
loop
Повторяет воспроизведение видео с начала после его завершения.
muted
Логический атрибут, который определяет значение по умолчания для аудио дорожки, содержащуюся в видео. Если атрибут указан, то аудио дорожка воспроизводиться не будет. Значение атрибута по умолчанию - "ложь", и это означает, что звук будет воспроизводиться, когда видео воспроизводится.
played
Атрибут TimeRanges, указывающий все диапазоны воспроизводимого видео.
poster
Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
preload
Используется для загрузки видео вместе с загрузкой веб-страницы.
src
Указывает путь к воспроизводимому видеоролику.
width
Задаёт ширину области для воспроизведения видеоролика.

autoplay

При наличии этого атрибута видео начинает воспроизводиться автоматически после загрузки страницы. Атрибут autoplay отменяет действие preload.

Синтаксис

<video autoplay="autoplay"></video>

Значения

В качестве значения указывается autoplay, также допустимо вообще не указывать никакое значение.

Значение по умолчанию

По умолчанию этот атрибут выключен.

controls

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

Синтаксис

<video controls="controls"></video>

Значения

В качестве значения указывается controls, также допустимо писать атрибут без значения.

Значение по умолчанию

По умолчанию этот атрибут выключен.

height

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

Синтаксис

<video></video>

Значения

Любое целое положительное число в пикселях или процентах.

Значение по умолчанию

Исходная высота берётся из параметров видео. Если эти параметры не доступны, тогда height принимается равной высоте картинке, заданной атрибутом poster. В противном случае высота видео устанавливается 150 пикселей.

loop

Зацикливает воспроизведение видео, оно повторяется каждый раз с начала после завершения.

Синтаксис

<video loop="loop"></video>

Значения

В качестве значения указывается loop, также допустимо писать атрибут без значения.

Значение по умолчанию

По умолчанию этот атрибут выключен.

poster

Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не вопроизводится. Само изображение может быть в любом доступном формате: GIF, PNG, JPEG. Если атрибут poster не указан, браузер постарается отобразить первый кадр видео.

Синтаксис

<video poster="<адрес>"></video>

Значения

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

Значение по умолчанию

Нет.

preload

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

Синтаксис

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

Значения

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

Значение по умолчанию

none

src

Указывает путь к воспроизводимому видеоролику. Для этой же цели можно использовать элемент <source>.

Синтаксис

<video src="<адрес>"></video>

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

width

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

Синтаксис

<video></video>

Значения

Любое целое положительное число в пикселях или процентах.

Значение по умолчанию

Исходная ширина берётся из параметров видео, если это значение не доступно, тогда width принимается равной ширине картинке, заданной атрибутом poster. Если этот атрибут не установлен, ширина устанавливается как 300 пикселей.

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

Примеры

Пример 1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>video</title>
  </head>
  <body>
    <video
     
     
      controls="controls"
      poster="video/duel.jpg"
    >
      <source
        src="video/duel.ogv"
        type='video/ogg; codecs="theora, vorbis"'
      />
      <source
        src="video/duel.mp4"
        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
      />
      <source
        src="video/duel.webm"
        type='video/webm; codecs="vp8, vorbis"'
      />
      Элемент video не поддерживается вашим браузером.
      <a href="video/duel.mp4">Скачайте видео</a>.
    </video>
  </body>
</html>

Пример 2

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

<!-- Простой пример с видео -->
<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 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>

Пример 3

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

<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>

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

Can I Use video? Data on support for the video feature across the major browsers from caniuse.com.

Поддержка WebM видео-кодека:

Can I Use webm? Data on support for the webm feature across the major browsers from caniuse.com.

Поддержка Ogg/Theora видео-кодека:

Can I Use ogv? Data on support for the ogv feature across the major browsers from caniuse.com.

Поддержка MPEG-4/H.264 видео-кодека:

Can I Use mpeg4? Data on support for the mpeg4 feature across the major browsers from caniuse.com.

Поддержка HEVC/H.265 видео-кодека:

Can I Use hevc? Data on support for the hevc feature across the major browsers from caniuse.com.

См. также

Ссылки

| Справочник HTML



Элемент <video> (от англ. "video" ‒ «видео») вставляет видео файл в HTML-документ. С его помощью можно воспроизводить видео файлы, а так же устанавливать различные настройки воспроизведения этих файлов (повтор, автовоспроизведение, картинка по умолчанию).

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

Видео кодеки

Видеокодек — это программа/алгоритм сжатия (т.е. уменьшения размера) видеоданных (видеофайла, видеопотока) и восстановления сжатых данных. Кодек — это файл-формула, которая определяет, каким образом можно «упаковать» видеоконтент и, соответственно, воспроизвести видео.

В настоящее время поддерживается три видео формата — MP4, WEBM, OGG:

MP4/MPEG-4 — самый популярный видео формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз. Расширение файла MP4 используется в основном для мультимедийного формата файла MPEG-4. Формат MPEG-4 – это стандарт, разработанный группой экспертов Moving Picture Experts Group (MPEG), как определено в MPEG-4, содержит MPEG-4 закодированный видео и аудио контент в кодировке Advanced Audio Coding (AAC). Обычно используется расширение файла MP4.

WebM — открытый формат мультимедиа, представленный компанией Google. Хранит видео, сжатое при помощи технологии VP8 и аудио, сжатое с помощью компрессии Ogg Vorbis. Часто всего применяется для онлайн-отправки видео с помощью HTML5.

OGG — открытый стандарт формата мультимедиаконтейнера, являющийся основным файловым и потоковым форматом для мультимедиакодеков фонда Xiph.Org, а также название проекта, занимающегося разработкой этого формата и кодеков для него. Как и все технологии, разрабатываемые под эгидой Xiph.Org, формат Ogg является открытым и свободным стандартом, не имеющим патентных или лицензионных ограничений.

Поддержка браузерами форматов аудио


Формат
MP4 Да Да Да Да Да Да
WebM Да Да Да Да
Ogg Да Да Да Да

MIME-типы для видео форматов

Формат MIME-тип
MP4 video/mp4
WebM video/webm
Ogg video/ogg

Синтаксис

<video src="URL">...</video>
<video>
  <source src="URL">
</video>

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

Обязателен.

Атрибуты

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

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

heightHTML5
Задаёт высоту области для воспроизведения видеоролика.

loopHTML5
Повторяет воспроизведение видео с начала после его завершения.

posterHTML5
Указывает URL-адрес изображения (картинки), которое будет отображаться пока видеофайл загружается или пока пользователь не нажмет кнопку воспроизведения. Если атрибут не установлен, то браузер отображает первый кадр видеоролика.

preloadHTML5
Указывает, какие действия должен выполнять браузер, если для видеоплеера не указан атрибут autoplay. При совместном использовании с атрибутом autoplay атрибут preload будет проигнорирован. Он может принимать одно из следующих трех значений:
auto - загрузка видеофайла начнется после загрузки страницы
metadata - сбор информации о видеофайле: размер, первый кадр, список воспроизведения, длительность
none - загрузка видеофайла начнется только после щелчка мыши по кнопке воспроизведение

srcHTML5
Указывает URL адрес видео файла.

widthHTML5
Задаёт ширину области для воспроизведения видеоролика.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Нет.

Различия между HTML 4.01 и HTML5

Элемент <video> является новым в HTML5.

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

Пример HTML: Попробуй сам
<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Ваш браузер не поддерживает элемент video.
</video>

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

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

Элемент
<video> 9+ 4+ 11.5+ Да 4+ 3.5+
Элемент
<video> 2.1+ 3.5+ 12+ 3.2+


Видео на HTML-странице. Что такое HTML. Учебник по HTML.

Показать видео посетителям сайта можно:

  • с помощью тега <video>;
  • выложив видео-файл на YouTube.

Тег <video>

<style>
    video {
        display: block;
        width: 720px;
        max-width: 100%;
        height: auto;
    }
</style>
<video controls loop poster="/images/sp2all_ru_7sek_TV.jpg">
    <source src="/images/sp2all_ru_7sek_TV.mp4" type="video/mp4">
    <img src="/images/sp2all_ru_7sek_TV.jpg" alt="Совместные покупки">
</video>

РЕЗУЛЬТАТ:

Атрибуты тега <video>
autoplay Автоматически запускает воспроизведение.
controls Отображает элементы управления.
height Определяет высоту окна для отображения видео.
loop Зацикливает воспроизведение.
muted Выключает звук при воспроизведении видео.
poster Определяет URL-адрес файла изображения, которое будет отображаться во время загрузки видеофайла или до тех пор, пока пользователь не нажмет на кнопку PLAY. Если атрибут не задан, то будет отображаться первый кадр видеофайла.
preload Определяет предварительную загрузку видео. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения:
  • auto – браузер загружает видеофайл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение;
  • metadata – браузер загружает первую небольшую часть видео, чтобы определить его основные характеристики;
  • none – отсутствие автоматической загрузки видео.
width Определяет ширину окна для отображения видео.

Видео с YouTube

Для вставки видео с YouTube применяется тег <iframe>. Но при этом снижается скорость загрузки страницы сайта. А скорость загрузки сайта влияет на показатель конверсии и результаты ранжирования в поисковой выдаче.

Использование атрибута loading="lazy" тега <iframe> решает эту проблему. Так отложенная загрузка видео YouTube экономит ~500 килобайт при начальной загрузке сайта.

<style>
    .YouTube {
        width: 616px;
        max-width: 100%;
        margin: 0 auto;
    }
    @media (max-width: 646px) {
        .YouTube {
            position: relative;
            padding-bottom: 56.25%;
            padding-top: 30px;
            height: 0;
            overflow: hidden;
        }
        .YouTube iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }
</style>
<div>
    <iframe loading="lazy" src="https://www.youtube.com/embed/np2M9KB5T4g" frameborder="0" allowfullscreen></iframe>
</div>

РЕЗУЛЬТАТ:

Читать дальше: Карты изображений

HTML первые шаги - урок 7 - Тег object. Вставка видео с Youtube.

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

 

 

Получился вот такой код:

<object>
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always">
</object>

Как вы наверно уже заметили для вставки видео используется тег <object>. Также у тега object есть атрибут style. Атрибут style это универсальный для всех тегов атрибут в нем пишутся CSS-стили для тега. Что такое CSS мы разберем чуть позже, а пока хватит нам и этого. CSS стили в атрибуте пишутся через точку с запятой. Здесь у нас есть height и width, то есть высота и ширина. Именно эти параметры мы можем поменять. Например если мы поставим:

<object>
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always">
</object>

То размер проигрывателя Youtube будет в два раза меньше. Также тогда следует изменить высоту и ширину у тега embed, которые заданы атрибутами width и height.

<object>
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always">
</object>

Также в теге object включены теги <param>. В тегах param прописываются свойства вставленного объекта. Среди вставленных параметров:

movie - обозначает, что это видео-ролик, а далее в атрибуте value URL этого ролика.

allowFullScreen - разрешить переход в полноэкранный режим, можно поставить value="false", чтобы нельзя было переходить в полноэкранный режим.

allowScriptAccess - нужно для работы с API проигрывателя.

Реализация 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

 

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

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

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

 

В 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">

HTML тег

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

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

Также тег <video> может содержать текст, который будет отображен в случае, если браузер не поддерживает формат видео файла.

На данный момент существует 3 формата видео: MP4/MPEG-4, OGG и WebM +. Для сжатия видеоданных и их восстановления используются специальные программы, видеокодеки. Кодек - это файл-формула, определяющая способ “упаковки” видеоконтента и его воспроизведения.

Для видео файла формата MPEG-4 используются видео кодек Н.264 и аудио кодек ААС. Для использования кодеков необходимо получить лицензию.

Для видео файла Ogg используются видео кодек Theora и аудио кодек Vorbis с открытым кодом.

Для видео файлов в формате WebM + используются видео кодек VP8 и аудио кодек Vorbis. Для их использования не требуется лицензии.

Синтаксис ¶

HTML тег <video> парный, содержимое записывается между открывающим (<video>) и закрывающим (</video&gt ) тегами.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      video {
        width: 300px; 
        height: 200px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
      <track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).mp4"/>
    </video>
    <p>Некоторая информация о видео</p>
  </body>
</html>
Попробуйте сами!

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      video {
      width: 300px; 
      height: 220px;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls>
      <source src=”http://techslides.com/demos/sample-videos/small.ogv” type=video/ogg>
      <source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
    </video>
    <p>Некоторая информация о видео</p>
  </body>
</html>
Попробуйте сами!

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

Атрибуты ¶

Тег <video> поддерживает также глобальные атрибуты и атрибуты событий.

Как использовать тег видео HTML

Откройте для себя основы работы с HTML-тегом `video`

Опубликовано , Последнее обновление

Тег video позволяет встраивать видеоконтент на ваши HTML-страницы.

Этот элемент может передавать потоковое видео с веб-камеры через getUserMedia () или WebRTC , или он может воспроизводить источник видео, на который вы ссылаетесь с помощью атрибута src :

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

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

Чтобы показать встроенные элементы управления, вы можете добавить элементы управления атрибут :

   

Вот как это выглядит в Chrome:

Первоначально отображаемое изображение является первым кадром видео.

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

   

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

Вы можете указать MIME-тип видеофайла с помощью атрибута type . Если не установлен, браузер попытается определить его автоматически:

   

По умолчанию видеофайл не воспроизводится автоматически. Добавьте атрибут autoplay для автоматического воспроизведения звука:

   

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

   

Атрибут loop перезапускает воспроизведение видео в 0:00, если он установлен, в противном случае, если он отсутствует, видео останавливается в конце файла:

   

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

CORS

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

Ничего не произойдет, если вы поместите этот тег на веб-страницу.Нет возможности запустить видео, и оно не воспроизводится автономно. Для воспроизведения видео необходимо добавить атрибут autoplay :

   

Изменение свойств отображения видео

Вы можете установить ширину и высоту области видео, выраженную в пикселях, с помощью атрибутов width и height :

   

Отображение содержимого, если

видео не поддерживается

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

    

Добавление нескольких источников

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

Вы делаете это с помощью источника tag:

  <элементы управления видео>
 
 

  

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

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

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

Вы можете принудительно загрузить видео с помощью

   

Работа с видео событиями

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

Событие play запускается, когда начинается воспроизведение видео:

  document.querySelector ('video'). AddEventListener ('play', () => {
  alert ('Видео воспроизводится !!!')
})
  

Вы также можете напрямую добавить это событие (как и другие), используя атрибут on непосредственно в элементе HTML:

   
  const playing = () => {
  alert ('Видео воспроизводится !!!')
})
  

Вот несколько событий, которые вы можете слушать:

  • воспроизвести началось воспроизведение видео
  • пауза видео было приостановлено
  • завершено воспроизведение видео завершено
  • timeupdate Пользователь взаимодействовал с временной шкалой воспроизведения и перешел вперед / назад
  • volumechange пользователь изменил громкость

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

HTML Tag »

Раскрытие: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше
Элемент
Все возможности для встраивания современных медиа с помощью HTML-кода
Что делает ?
Элемент
Дисплей
встроенный

Пример кода

    
К сожалению, ваш браузер не поддерживает HTML5 видео , но вы можете скачать это видео из Интернет-архива.

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

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

iframe vs video

Многие веб-сайты видеохостинга, такие как YouTube и Vimeo, предоставляют код встраивания видео, который использует iframe , а не тег video . Какой тег следует использовать при встраивании видео из службы потокового видео, такой как YouTube или Vimeo? Практически во всех случаях имеет смысл использовать код встраивания, предоставляемый сервисом потокового видео.Делая это, вы получаете преимущества всех методов оптимизации, встроенных в видеопроигрыватель потокового сервиса. Оптимизация поможет повысить скорость воспроизведения, а также будет включать резервные варианты для пользователей старых браузеров.

Адам - ​​технический писатель, специализирующийся на документации и руководствах для разработчиков.

HTML-видео - javatpoint

HTML 5 также поддерживает тег

В настоящее время для HTML-тега видео поддерживаются три формата видео:

  1. mp4
  2. WebM
  3. ogg

Давайте посмотрим на таблицу, которая определяет, какой веб-браузер поддерживает формат видеофайлов.

Android также поддерживает формат mp4.

Пример HTML-тега видео

Давайте посмотрим код для воспроизведения файла mp4 с использованием тега HTML video.

<элементы управления видео> Ваш браузер не поддерживает HTML-тег видео.

Проверить это сейчас

Давайте посмотрим на примере воспроизведения файла ogg с помощью тега HTML video.

<элементы управления видео> Ваш браузер не поддерживает HTML-тег видео.


Поддерживающие браузеры


Атрибуты HTML-тега видео

Давайте посмотрим на список атрибутов видео тега HTML 5.

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

Пример атрибута HTML-тега видео

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

<цикл автозапуска элементов управления видео> Ваш браузер не поддерживает HTML-тег видео.

Проверить это сейчас

Типы MIME для формата видео HTML

Доступный HTML-тег видео типа MIME приведен ниже.

Формат видео Тип MIME
mp4 video / mp4
ogg video / ogg
webM video / web6

HTML5 тег видео - Tutorial Republic

Тема: Справочник по тегам HTML5 Назад | След.

Описание

Элемент используется для встраивания видеоконтента в HTML-документ без необходимости использования каких-либо дополнительных плагинов, таких как Flash Player.

Поддержка элемента зависит от браузеров. На данный момент существует три основных формата видео, которые поддерживаются для элемента видео: MP4, Ogg и WebM.

В следующей таблице приведены контекст использования и история версий этого тега.

Размещение: Блок
Содержимое: <источник> , <трек> и текст
Начальный / конечный тег: Начальный тег: требуется , Конечный тег: требуется
Версия: Новое в HTML5

Синтаксис

Базовый синтаксис тега задается следующим образом:

HTML / XHTML: <видео>...

Пример ниже показывает действие тега .

    

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

    

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


Атрибуты, специфичные для тегов

В следующей таблице показаны атрибуты, относящиеся к тегу .

Атрибут Значение Описание
автозапуск автозапуск Этот логический атрибут указывает, что видео будет автоматически воспроизводиться, как только оно сможет это сделать, без остановки для завершения загрузки данных.
органы управления органы управления Если указано, браузеры будут отображать элементы управления, позволяющие пользователю управлять воспроизведением видео, например воспроизведение / пауза, громкость и т. Д.
высота пикселей Устанавливает высоту области отображения видео.
петля петля Этот логический атрибут указывает, что видео будет автоматически начинаться заново по достижении конца.
без звука без звука Этот логический атрибут указывает, будет ли видео изначально отключено.Значение по умолчанию - false, что означает, что звук будет воспроизводиться при воспроизведении видео.
плакат URL Задает изображение, которое будет отображаться во время загрузки видео или пока пользователь не нажмет кнопку воспроизведения. Если этот атрибут не указан, ничего не отображается, пока не станет доступен первый кадр видео; тогда первый кадр отображается как плакат.
предварительный натяг авто
метаданные
нет
Подсказывает браузеру, следует ли загружать само видео или его метаданные. Атрибут autoplay может переопределить этот атрибут, потому что, если вы хотите автоматически воспроизводить видео, браузеру, очевидно, потребуется его загрузить.
src URL Задает расположение видеофайла для встраивания.В качестве альтернативы вы можете использовать предпочтительный тег , поскольку он позволяет использовать несколько параметров.
ширина пикселей Устанавливает ширину области отображения видео.

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

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


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

Тег также поддерживает атрибуты событий в HTML5.


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

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

Базовая поддержка -

  • Firefox 3.5+
  • Google Chrome 4+
  • Internet Explorer 9+
  • Apple Safari 4+
  • Opera 10.5+

Дополнительная литература

См. Учебник по: HTML5 Video, HTML5 Audio.

Связанные теги: , , .

Как встроить видео в ваш HTML

До HTML5, чтобы воспроизводить видео на веб-странице, вам нужно было использовать плагин, например Adobe Flash Player. С появлением HTML5 вы теперь можете размещать видео прямо на самой странице.

Это позволяет воспроизводить видео на страницах, предназначенных для мобильных устройств, поскольку такие плагины, как Adobe Flash Player, не работают на Android или iOS.

Элемент HTML используется для встраивания видео в веб-документы. Он может содержать один или несколько источников видео, представленных с помощью атрибута src или элемента источника.

Чтобы встроить видеофайл, просто добавьте этот фрагмент кода и измените src на путь к вашему видеофайлу:

  <элементы управления видео>
  
  
  Ваш браузер не поддерживает элемент видео. Пожалуйста, обновите его до последней версии.
  

Элемент поддерживается всеми современными браузерами. Однако не все браузеры поддерживают один и тот же формат видеофайлов. Файлы MP4 являются наиболее широко распространенным форматом, а другие форматы, такие как WebM и Ogg, поддерживаются в Chrome, Firefox и Opera.

Чтобы ваше видео воспроизводилось в большинстве браузеров, рекомендуется кодировать их как в форматы Ogg, так и в MP4, и включать их в элемент , как в примере выше.Браузеры будут использовать первый распознанный формат.

Если по какой-либо причине браузер не распознает какой-либо из форматов, вместо него будет отображаться текст «Ваш браузер не поддерживает видеоэлемент. Пожалуйста, обновите его до последней версии».

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

элементы управления

Элемент управления Атрибут определяет, отображаются ли такие элементы управления, как кнопка воспроизведения / паузы или ползунок громкости.

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

автовоспроизведение

"автовоспроизведение" может иметь значение true или false. Вы устанавливаете его в значение true, добавляя его в тег, если он отсутствует в теге, он устанавливается в значение false. Если установлено значение true, воспроизведение видео начнется, как только в буфере будет достаточно видео, чтобы его можно было воспроизвести.Многие люди считают, что автоматическое воспроизведение видео мешает или раздражает. Так что используйте эту функцию экономно. Также обратите внимание, что некоторые мобильные браузеры, например Safari для iOS, игнорируют этот атрибут.

Это еще один логический атрибут. Если включить autoplay в тег , встроенное видео начнет воспроизводиться, как только его достаточно будет в буфере.

  <автовоспроизведение видео>
  

  

Имейте в виду, что многие люди считают автоматическое воспроизведение видео мешающим или раздражающим, поэтому используйте эту функцию с осторожностью.Также обратите внимание, что некоторые мобильные браузеры, такие как Safari для iOS, полностью игнорируют этот атрибут.

плакат

Атрибут плакат - это изображение, которое отображается на видео, пока пользователь не щелкнет для его воспроизведения.

    

Видео могут быть дорогими

Хотя добавить видео на свою страницу проще, чем когда-либо, часто лучше загрузить видео в службу, такую ​​как YouTube, Vimeo или Wistia, и вместо этого встроить их код.Это связано с тем, что показ видео может быть дорогостоящим как для вас с точки зрения затрат на сервер, так и для ваших зрителей, если у них ограниченные тарифные планы.

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

А теперь вставляйте видео, сколько душе угодно. Или нет - это ваше дело.

Как вставить фильм или видео в документ HTML

Обновлено: 31.08.2020, Computer Hope

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

Кончик

Размещение фильмов на вашем сервере может быть дорогостоящим из-за затрат на полосу пропускания.Альтернативный вариант - разместить видео на YouTube и встроить ссылку на видео YouTube на свою веб-страницу.

Примечание

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

Ссылка на файлы фильмов

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

Робот для дисковода гибких дисков

HTML код

  Робот для дисковода гибких дисков  

IBM Linux коммерческий

HTML код

  коммерческая версия IBM Linux  

Вставить видео с YouTube

Размещение видео на YouTube - это замечательно, потому что он экономит на пропускной способности, может поддерживать большое количество зрителей и знакомит с вашими видео посетителей большинства интернет-сайтов.Ниже приведен пример видео, размещенного на YouTube и встроенного на этот сайт.

HTML код

HTML-код для всех видео YouTube можно найти по ссылке общего доступа, которая есть на каждом видео YouTube. После того, как вы нажали ссылку Поделиться , нажмите ссылку Вставить . Ниже приведен пример кода, используемого для отображения вышеуказанного видео YouTube.

 <объект> 


Видео тег

Тег

Ваш браузер не поддерживает тег

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *