Posted:
Май 8, 2023
Comments:
0 Comments

Как вставить видео в сайт html: Тег | htmlbook.ru

Содержание

Тег | htmlbook.ru

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 уроки для начинающих академия

HTML5CSS. ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад
Дальше ❯

Пример HTML-видео. Любезность Большой кролик бак.

Your browser does not support HTML5 video.

Воспроизведение видео в формате HTML

Перед HTML5 видео может воспроизводиться только в браузере с подключаемым модулем (например, Flash).

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

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

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

Element
<video>4.09.03.54.010.5

Элемент HTML < Video >

Чтобы показать видео в формате HTML, используйте элемент <video>:

Пример

<video controls>
  <source src=»movie. mp4″ type=»video/mp4″>
  <source src=»movie.ogg» type=»video/ogg»>
Your browser does not support the video tag.
</video>

Как это работает

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

Это хорошая идея, чтобы всегда включать width и height атрибутов. Если высота и ширина не заданы, страница может мерцать во время загрузки видео.

Элемент <source> позволяет указать альтернативные видеофайлы, которые могут быть выбраны обозревателем. Браузер будет использовать первый распознанный формат.

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

HTML <video> Автозапуск

Для запуска видео автоматически используется атрибут autoplay:

Пример

<video autoplay>
  <source src=»movie. mp4″ type=»video/mp4″>
  <source src=»movie.ogg» type=»video/ogg»>
Your browser does not support the video tag.
</video>

Атрибут автозапуска не работает в мобильных устройствах, таких как iPad и iPhone.

Поддержка HTML-видео-браузера

В HTML5 есть 3 поддерживаемых видео форматов: MP4, WebM и OGG.

Поддержка браузера для различных форматов:

BrowserMP4WebMOgg
Internet ExplorerДаНетНет
ChromeДаДаДа
FirefoxДаДаДа
SafariДаНетНет
OperaДа (from Opera 25)ДаДа

HTML Video — Типы медиа

Формат файлаТип медиа
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

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

HTML5 определяет методы, свойства и события DOM для элемента <video>.

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

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

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

Your browser does not support HTML5 video.

Video courtesy of Big Buck Bunny.

Для полной справки по тегам перейдите к нашей справка аудио/видео в формате HTML5.

Теги видео HTML5

ТегОписание
<video>Определяет видео или фильм
<source>Определяет несколько мультимедийных ресурсов для элементов мультимедиа, таких как <Video> и <Audio>
<track>Определяет текстовые дорожки в проигрывателях мультимедиа

❮ Назад
Дальше ❯

Популярное

html картинка
как вставить картинку в html
цвет текста фона
размер текста html
цвет размер шрифта html
формы html
список html
таблица html
как сделать ссылку в html
html элементы

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности
О нас
Контакты

HTML-видео

❮ Назад
Далее ❯

Элемент HTML используется для
показать видео на веб-странице.

Пример

Предоставлено Big Buck Bunny:

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

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

HTML-элемент

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

Пример

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

Как это работает

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

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

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

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

HTML

Для автоматического запуска видео используйте autoplay 9Атрибут 0007:

Пример

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

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

Примечание. Браузеры Chromium не
разрешить автозапуск в большинстве случаев. Однако приглушенный автозапуск всегда разрешен.

Добавить без звука после
autoplay , чтобы ваше видео начинало воспроизводиться автоматически (но без звука):

Пример

<автозапуск видео отключен>
 mp4" type="video/mp4">
 
Ваш браузер не поддерживает тег видео.

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

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

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

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

Форматы видео HTML

Поддерживаются три видеоформата: MP4, WebM и Ogg. Браузер поддерживает различные форматы:

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

HTML-видео — типы носителей

Формат файла Тип носителя
MP4 видео/mp4
ВебМ видео/вебм
Огг видео/огг

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

HTML DOM определяет методы, свойства и события для элемента .

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

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

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

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

Видео предоставлено Big Buck Bunny.

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

Полную справку по DOM см. в нашем справочнике по HTML Audio/Video DOM.

Теги HTML-видео

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

❮ Предыдущий
Следующий ❯

ВЫБОР ЦВЕТА

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

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки

Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры
0281
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery2

|
О

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

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

HTML Аудио

❮ Назад
Далее ❯

Элемент HTML используется для
воспроизвести аудиофайл на веб-странице.

HTML-элемент

Чтобы воспроизвести аудиофайл в формате HTML, используйте элемент : аудио/огг">
 
Ваш браузер не поддерживает элемент audio.

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

HTML-аудио — как это работает

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

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

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

HTML

Для автоматического запуска аудиофайла используйте атрибут autoplay : ">
 
Ваш браузер не поддерживает элемент audio.

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

Примечание. Браузеры Chromium не
разрешить автозапуск в большинстве случаев. Однако приглушенный автозапуск всегда разрешен.

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

Пример

<автовоспроизведение отключено>
 
 
Ваш браузер не поддерживает элемент audio.

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

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

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

Элемент
<аудио> 4,0 9,0 3,5 4,0 10,5

Аудиоформаты HTML

Поддерживаются три аудиоформата: MP3, WAV и OGG. Браузер поддерживает различные форматы: 

Браузер MP3 WAV ОГГ
Edge/IE ДА ДА* ДА*
Хром ДА ДА ДА
Firefox ДА ДА ДА
Сафари ДА ДА НЕТ
Опера ДА ДА ДА

*From Edge 79

HTML Audio — Типы носителей

Формат файла Тип носителя
MP3 аудио/mpeg
ОГГ аудио/ogg
WAV аудио/wav

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

HTML DOM определяет методы, свойства и события для элемента .

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

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

Теги аудио HTML

Тег Описание
<аудио> Определяет звуковое содержимое
<источник> Определяет несколько медиа-ресурсов для медиа-элементов, таких как

❮ Предыдущий
Следующий ❯

ВЫБОР ЦВЕТА

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

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.

This entry was posted in Популярное