Что такое HTML5 видео?
Спецификации HTML5 представили видео элемент с целью воспроизведения видео, частичная замена элемента объекта.
HTML5 видео по замыслу его создателей, чтобы стать новым стандартным способом, чтобы показать видео в Интернете, вместо ранее де-факто стандартом использования проприетарного Adobe Flash плагин, хотя раннее применение было затруднено из-за отсутствия соглашения о том, какие видео кодирования форматов и аудио форматы кодирования должны поддерживаться в веб-браузерах.
Воспроизведение видео в формате HTML
Перед тем как HTML5, не было никакого стандарта для показа видео на веб-странице.
Перед тем как HTML5, видео может быть воспроизведен только с плагином (like flash) .
HTML5 <video> элемент определяет стандартный способ вставлять видео на веб - странице.
Поддержка браузеров
Числа в таблице указать первую версию браузера , которая полностью поддерживает <video> элемент.
| Элемент | |||||
|---|---|---|---|---|---|
| <video> | 4,0 | 9,0 | 3,5 | 4,0 | 10,5 |
HTML <video> Элемент
Для того, чтобы показать видео в формате HTML, используйте <video> элемент:
пример
<video width="320" height="240" controls>
<source src="/html/movie.mp4" type="video/mp4">
<source src="/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> Попробуй сам " Как это работает
controls атрибутом добавляет элементы управления видео, как воспроизведение, пауза, и объем.
Это хорошая идея , чтобы всегда включать width и height атрибутов.
Если высота и ширина не установлена, браузер не знает размер видео. Эффект будет , что страница будет меняться (or flicker) в то время как видео нагрузок.
Текст между <video> и </video> теги будут отображаться только в браузерах , которые не поддерживают <video> элемент.
Множественные <source> элементы могут ссылаться на различные видео файлы. Браузер будет использовать первый признанный формат.
HTML <video> Автозапуск
Для того, чтобы начать видео автоматически использовать autoplay атрибут:
пример
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> Попробуй сам " autoplay атрибут не работает в мобильных устройствах , таких как IPad и iPhone.
HTML Video - Поддержка браузеров
В настоящее время существует 3 поддерживаемых форматов видео для <video> элемент: MP4, WebM и Ogg:
| браузер | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (from Opera 25) | YES | YES |
HTML Video - Типы носителей
| Формат файла | Тип носителя |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML Видео - методы, свойства и события
HTML5 определяет методы DOM, свойство и событие для <video> элемента.
Это позволяет загружать, играть, и приостанавливать воспроизведение видео, а также настройка длительности и объема.
Есть также DOM событие, которые могут уведомить вас, когда видео начинает играть, пауза и т.д.
Для полной ссылки DOM, перейдите на наш HTML5 Audio / Video DOM Reference .
HTML5 видео Ключевые слова
| Тег | Описание |
|---|---|
| <video> | Определяет видео или фильм |
| <source> | Определяет несколько ресурсов медиа для медиа - элементов, таких как <video> и <audio> |
| <track> | Определяет текстовые дорожки в медиаплеерах |