Html код видео: Как получить HTML код видео

07.02.2023 by Комментариев нет

Тег | htmlbook.ru

Management

Атрибуты тегов

Значения атрибутов

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+3.0+10.50+3.1+3.5+2.0+2.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

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

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

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

Синтаксис

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

Атрибуты

autoplay
Видео начинает воспроизводиться автоматически после загрузки страницы.
controls
Добавляет панель управления к видеоролику.
height
Задает высоту области для воспроизведения видеоролика.
loop
Повторяет воспроизведение видео с начала после его завершения.
poster
Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
preload
Используется для загрузки видео вместе с загрузкой веб-страницы.
src
Указывает путь к воспроизводимому видеоролику.
width
Задает ширину области для воспроизведения видеоролика.

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

Обязателен.

Пример

HTML5IE 9CrOpSaFx

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

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

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

Браузеры

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

HTML5Видео

Статьи по теме

  • Видео на сайте
  • Пять вещей, которые надо знать об HTML5

Статьи по теме

  • Видео на сайте

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

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

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

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

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

  • area
  • audio
  • img
  • figcaption
  • figure
  • map
  • track
  • video
  • embed
  • iframe
  • object
  • param
  • picture
  • 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 пикселей.

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

  • WHATWG HTML Living Standard

Примеры

Пример 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.

См. также

  • <audio>

Ссылки

  • Тег <video> MDN (рус. )

HTML-видео Тег

❮ Назад
Полный справочник HTML
Далее ❯

Пример

Воспроизведение видео:

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

Попробуйте сами »

Определение и использование

Тег используется для встраивания видео
содержимое документа, например видеоклип или другие видеопотоки.

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

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

HTML поддерживает три видеоформата: MP4, WebM и OGG.

Браузер МП4 ВебМ Огг
Край ДА ДА ДА
Хром ДА ДА ДА
Firefox ДА ДА ДА
Сафари ДА ДА НЕТ
Опера ДА ДА ДА

Советы и примечания

Совет: Аудиофайлы смотрите на
Тег <аудио> .

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

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

Элемент
<видео> 4,0 9,0 3,5 3.1 11,5

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

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

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

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

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

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

Связанные страницы

Ссылка HTML DOM: Ссылка HTML Audio/Video DOM

Настройки CSS по умолчанию

Нет.

❮ Предыдущий
Полный справочник HTML
Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
60002 902
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM |
О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Как вставить видео в HTML — Изучите HTML

Существует несколько способов вставки видео на ваш сайт. Теги , и использовались для вставки видео в документ HTML. Но сейчас они устарели, поэтому давайте посмотрим, как использовать теги