English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основные руководства по HTML5

API HTML5

Медиа HTML5

Графика HTML5

Video (видео) в HTML5

HTML <video> подходит для HTML 5+, используется для определения потокового видео для онлайн-просмотра.

Video (видео) в HTML5

Многие сайты используют видео. HTML5 предоставляет стандарт для их отображения.

Проверьте, поддерживает ли ваш браузер HTML5 видео:

Видео на веб-сайтах

До сих пор не существует стандарта для отображения видео на веб-страницах.

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

HTML5 определяет стандартный метод включения видео через элемент video.

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

Internet Explorer 9+, Firefox, Opera, Chrome и Safari поддерживают элемент <video>.

Внимание: Internet Explorer 8 и более ранние версии IE не поддерживают элемент <video>.

HTML5 (видео) - как это работает

Чтобы отобразить видео в HTML5, вам всего лишь нужно:

Онлайн пример

<video width="320" height="240" controls>
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.ogg" type="video/ogg">
Ваш браузер не поддерживает тег Video.
</video>
Проверьте, посмотрите ›/›

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

Кроме того, элемент <video> предоставляет свойства width и height для управления размером видео. Если установлены высота и ширина, необходимое пространство для видео будет сохранено при загрузке страницы. Если эти свойства не установлены, браузер не знает размера видео, и он не может сохранить конкретное пространство при загрузке, страница будет изменяться в зависимости от размера исходного видео.

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

Элементы <source> поддерживаются элементом <video>. Элемент <source> может链接 к различным видеофайлам. Браузер будет использовать первый распознаваемый формат:

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

В настоящее время элемент <video> поддерживает три видеоформата: MP4, WebM и Ogg:

БраузерMP4WebMOgg
Internet ExplorerДАНЕТНЕТ
ChromeДАДАДА
FirefoxДАДАДА
SafariДАНЕТНЕТ
OperaДА (с Opera 25)ДАДА

  • MP4 = файл MPEG 4 с видео-кодировкой H.264 и аудио-кодировкой AAC

  • WebM = файл WebM с видео-кодировкой VP8 и аудио-кодировкой Vorbis

  • Ogg = файл Ogg с видео-кодировкой Theora и аудио-кодировкой Vorbis

Формат видео

ФорматMIME-type
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

HTML5 <video> - управление с помощью DOM

Элементы <video> и <audio> в HTML5 также имеют методы, свойства и события.

Методы, свойства и события элементов <video> и <audio> можно контролировать с помощью JavaScript.

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

Простые методы в примере демонстрируют, как использовать элемент <video>, читать и устанавливать свойства, а также как вызывать методы.

Онлайн пример 1

Создайте простые элементы управления воспроизведением/паузой и изменением размера для видео:



В примере были использованы два метода: play() и pause(). Также были использованы два свойства: paused и width.

Более подробную информацию см. Руководство по DOM HTML5 Audio/Video.

Тег Video в HTML5

ТегОписание
<video>Определение одного видео
<source>Определение различных ресурсов медиа, например <video> и <audio>
<track>Определение текстового трека в медиаплеере
Audio (аудио) в HTML5Геолокация HTML5