Последние учебники веб-разработки
×

HTML5 Руководство

HTML ГЛАВНАЯ HTML Введение HTML редакторы HTML базовый HTML элементы HTML Атрибуты HTML Заголовки HTML Пункты HTML Стили HTML форматирование HTML цитаты HTML Компьютерный код HTML Комментарии HTML Цвета HTML CSS HTML связи HTML Изображений HTML таблицы HTML Списки HTML Блок и строковые элементы HTML Классы HTML раскладка HTML отзывчивый HTML Iframes HTML JavaScript HTML Глава HTML юридические лица HTML Символы HTML Charset HTML URL шифровать HTML XHTML

HTML формы

HTML формы HTML Форма Элементы HTML Типы входных данных HTML Входные атрибуты

HTML5

HTML5 вступление HTML5 Поддержка HTML5 элементы HTML5 Семантика Миграция HTML5 HTML5 Гид по стилю

HTML Графика

HTML холст HTML SVG

HTML СМИ

HTML СМИ HTML видео HTML аудио HTML Плагины HTML YouTube

HTML APIs

HTML Geolocation HTML Перетаскивания HTML Локальное хранилище HTML App кэш HTML Web Workers HTML SSE

HTML Примеры

HTML Примеры HTML викторина HTML5 викторина HTML Резюме

HTML Рекомендации

HTML Список тегов HTML Атрибуты HTML События HTML холст HTML Аудио Видео HTML DOCTYPEs HTML Цвета HTML Наборы символов HTML URL шифровать HTML Языковые коды HTTP Сообщения HTTP методы PX to EM конвертер Горячие клавиши

HTML5 видео


HTML Video Пример. Предоставлено Big Buck Bunny .

Попробуй сам "

Что такое 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:

браузер MP4WebMOgg
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 событие, которые могут уведомить вас, когда видео начинает играть, пауза и т.д.

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




Видео любезно Big Buck Bunny .

Попробуй сам "

Для полной ссылки DOM, перейдите на наш HTML5 Audio / Video DOM Reference .


HTML5 видео Ключевые слова

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