Tag html5 video: Атрибут autoplay | htmlbook.ru

Leave a Comment / Html / By /

Видео — Учебник HTML — schoolsw3.com

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

HTML элемент <video> используется для отображения видео на веб странице.

Пример

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

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

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

HTML элемент <video>

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

Пример

<video controls>
  <source src=»movie.mp4″ type=»video/mp4″>
  <source src=»movie.ogg» type=»video/ogg»>
  Ваш браузер не поддерживает тег video.
</video>

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

HTML 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»>
  Ваш браузер не поддерживает тег video.
</video>

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

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

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

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

Элемент
<video> 4.0 9.0 3.5 4.0 10.5

HTML Формат video

Существует три поддерживаемых видеоформата: MP4, WebM, и Ogg. Поддержка браузером различных форматов является:

Браузер MP4 WebM Ogg
Internet Explorer ДА НЕТ НЕТ
Chrome ДА ДА ДА
Firefox ДА ДА ДА
Safari ДА НЕТ НЕТ
Opera ДА (для Opera 25) ДА ДА

HTML Video — тип носителя

Формат файла Тип носителя
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML Video — Методы, свойства и события

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

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

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

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


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

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

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

Полный справочник DOM, зайдите HTML Audio/Video DOM Справочник.

HTML Video теги

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

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


ТОП Учебники
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 Справочник
ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

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

Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

Работа с видео в HTML5.

Всем привет! Сегодня мы подробно поговорим о такой мультимедийной возможности HTML5 как воспроизведение видео.

Для того, чтобы вставить видео на сайт, используется тег video.

<video src="path/to/video/file.mp4"></video>

У данного тега есть атрибут src, в который мы должны прописать путь до нашего видеоролика.

Если вы сейчас откроете страницу в браузере, то увидите картинку(постер), однако, больше ничего не будет. Вы никак не сможете взаимодействовать с видео. (Google Chrome).

Чтобы мы смогли увидеть элементы управления, такие, как шкала времени, воспроизведение/пауза, управление громкостью и полноэкранный режим, существует атрибут controls.

<video src="video.mp4" controls></video>

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

<video src="video.mp4" controls autoplay></video>

Атрибут loop используется для того, чтобы зациклить видео, т.е. для того, чтобы видео сразу же запускалось снова после того, как оно закончилось.

<video src="video.mp4" controls autoplay loop></video>

Есть еще такой интересный атрибут как preload. Как понятно из названия, он отвечает за предзагрузку видео. У него 3 значения:

  • none — означает, что никакой предзагрузки не будет. Не будет вообще никакой информации, даже такой, как длительность, уровень громкости и т. д.
  • metadata — это значение, наоборот, покажет нам ту информацию, которую не покажет значение none
  • auto — подгружает видео сразу после загрузки страницы, чтобы человек мог его сразу запустить и не ждать, пока оно загрузится. Что-то вроде полоски на YouTube, но тут она не отображается

Понятно, что если у вас стоят сразу 2 атрибута — preload и autoplay, то весь смысл атрибута preload пропадает.

<video src="video.mp4" controls preload="auto"></video>

Конечно же, у данного тега есть такие атрибуты как width и height, которые отвечают за ширину и высоту видео.

<video src="video.mp4" controls autoplay widht="500"></video>

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

<video src="video.mp4" controls poster="poster. png"></video>

Для того, чтобы выключить звук у видео, существует атрибут muted.

<video src="video.mp4" controls autoplay muted></video>

Также, в html5 video есть возможность указать промежуток времени, с которого начнется просмотр и когда он закончится. Для этого достаточно указать #t= после имени видеофайла и указать время начала и конца через запятую.

<video src="video.mp4#t=3,5" controls></video>

В примере выше мы указали, что видео должно начаться с 3 секунды и закончиться на 5.

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

<video src="video.mp4#t=3" controls autoplay></video>

В примере выше видео будет начинаться с 3 секунды и идти до конца.

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

<video src="video.mp4#t=,5" controls></video>

В примере выше видео начнется с самого начала и будет идти до 5-ой секунды.

Возможность встраивать видео в html появилась недавно и понятно, что старые браузеры не поддерживают данной возможности. Чтобы это исправить, мы можем написать им какой-то текст между тегами <video></video>

<video src="video.mp4" controls>
  К сожалению, ваш браузер не поддерживает HTML5 Video.
</video>

Или вы можете встроить сюда какой-то другой плеер, например, на flash или javascript, и тогда видео смогут просмотреть даже пользователи старых браузеров.

Каждый современный браузер поддерживает свой формат видео, а старые браузеры имеют поддержку еще хуже. Чтобы поддерживать несколько форматов видео, существует тег source.

<video controls autoplay>
  <source src="video. mp4"></source>
  <source src="video.ogv"></source>
</video>

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

У тега source есть атрибут

type, в котором мы указываем MIME тип и кодеки.

<video controls autoplay>
  <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
  <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'></source>
</video>

Указывать тип файла не обязательно, но желательно. Все дело в том, что чтобы определить, что это за файл, браузеру придется скачать его начало. Чтобы не напрягать лишний раз сеть, лучше всегда указывать атрибут type.

Итак, на этом все. Это все, что можно и нужно знать про HTML5 Video. Спасибо за внимание и удачи!

  • Создано 22. 08.2014 20:40:25
  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Тег HTML5 video — Tutorial Republic

Advertisements

Тема: Теги HTML5 СправочникПредыдущая|Следующая

Описание

Элемент используется для встраивания видеоконтента в документ HTML без использования каких-либо дополнительных плагинов, таких как Flash player.

Поддержка элемента

Поддержка элемента зависит от браузера. На данный момент для видеоэлемента поддерживаются три основных видеоформата: MP4, Ogg и WebM.

В следующей таблице приведены контекст использования и история версий этого тега.

Размещение: Блок
Содержимое: <источник> , <трек> и текст
Начальный/конечный тег: Начальный тег: требуется , Конечный тег: требуется
Версия: Новое в HTML5

Синтаксис

Основной синтаксис тега :

HTML / XHTML:

HTML / XHTML:

> Тег в действии.

Пример
Попробуйте этот код »
 
    Ваш браузер не поддерживает элемент видео HTML5.

Видео с использованием набора элементов управления браузера по умолчанию и альтернативными источниками.

Пример
Попробуйте этот код »
 
    
    
    Ваш браузер не поддерживает элемент видео HTML5.

Совет: Вы можете поместить содержимое, такое как текст или ссылку для скачивания, внутрь элемента видео, чтобы обеспечить альтернативное содержимое в случае, если браузер не поддерживает видеоконтент или по какой-то причине не удалось загрузить исходный файл видео.

Атрибуты, специфичные для тега

В следующей таблице показаны атрибуты, характерные для тега .

Атрибут Значение Описание
автовоспроизведение автовоспроизведение Этот логический атрибут указывает, что видео автоматически начнет воспроизводиться, как только оно сможет это сделать, не останавливаясь для завершения загрузки данных.
органы управления органы управления Если указано, браузеры будут отображать элементы управления, позволяющие пользователю управлять воспроизведением видео, например воспроизведение/пауза, громкость и т. д.
высота пикселей Устанавливает высоту области отображения видео.
петля петля Этот логический атрибут указывает, что видео будет автоматически начинаться заново по достижении конца.
приглушенный приглушенный Этот логический атрибут указывает, будет ли изначально отключено видео. Значение по умолчанию — false, что означает, что звук будет воспроизводиться при воспроизведении видео.
плакат URL-адрес Указывает изображение, которое будет отображаться во время загрузки видео или до тех пор, пока пользователь не нажмет кнопку воспроизведения. Если этот атрибут не указан, ничего не отображается, пока не станет доступен первый кадр видео; затем первый кадр отображается как постер.
предварительная нагрузка авто
метаданные
нет 		Подсказывает браузеру, следует ли загружать само видео или его метаданные. Атрибут autoplay может переопределить этот атрибут, потому что если вы хотите автоматически воспроизводить видео, браузеру, очевидно, потребуется его загрузить.
источник URL-адрес Указывает расположение видеофайла для встраивания. Кроме того, вы можете использовать предпочтительный тег , так как он допускает несколько вариантов.
ширина пикселей Устанавливает ширину области отображения видео.

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

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

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

Тег

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

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

Совместимость с браузерами

Тег поддерживается всеми основными современными браузерами.

Базовая поддержка —

  • Firefox 3. 5+
  • Google Chrome 4+
  • Internet Explorer 9+
  • Apple Сафари 4+
  • Опера 10.5+

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

См. руководство по: HTML5 Video, HTML5 Audio.

Связанные теги: <источник> , <трек> , <аудио> .

Предыдущая страница Следующая страница

Видеотег HTML5

Поскольку Интернет постоянно развивается, а веб-пространство постоянно меняется в своем формате, HTML5 теперь является новым стандартом, в котором пользователи будут работать с контентом Всемирной паутины. В настоящее время с HTML4, который является четвертой версией языка гипертекстовой разметки, видео не было встроено в код, поэтому третьим сторонам пришлось создавать приложения для воспроизведения видео. Это означало определенный процент риска со стороны конечного пользователя, поскольку ему приходилось загружать стороннее программное обеспечение только для воспроизведения видео. Теперь с HTML5 возможно воспроизведение видео без сторонних плагинов для браузера, поскольку в код встроены функции видео. В дополнение к этому, функция перетаскивания для всех видео HTML5 также будет независима от стороннего программного обеспечения, как это зависело ранее.

Чтобы лучше понять HTML5, мы поговорим об основах создания базового документа HTML:

1. Ваш документ HTML5 должен начинаться с , так как это сообщает веб-браузеру, какая версия HTML документ находится внутри.

2. Добавьте элемент HTML, который будет демонстрировать язык документа. Внутри этого элемента у вас будут элементы и, которые содержат информацию о HTML-документе, где тело содержит основное содержимое вашего документа.

3. Наконец закройте его с помощью.

Например, это должно выглядеть примерно так:

 

<голова>
 Название документа 

 Содержимое документа

Обратите внимание, что в этом примере в заголовок, тело и заголовок также добавлены закрывающие элементы. Если их не добавить, язык HTML документа будет неполным и он не будет работать. как предполагалось. Это очень простой HTML-документ, в который не добавлены аудио, изображения или видео.

Так как же использовать теги для добавления аудио и видео на веб-страницу?

Чтобы добавить на веб-страницу видео, написанное с использованием HTML5, необходимо использовать правильные элементы и теги. И видео, и аудио элементы должны иметь начальный и конечный теги, встроенные в язык, а также исходный элемент для вашего аудио и видео (источник, из которого берутся эти элементы — обычно это URL-адрес).

Скопируйте код, сгенерированный приложением EasyHTML5Video, на свою веб-страницу

Видеодокумент HTML5 будет выглядеть примерно так:

  <голова> <метакодировка="UTF-8">Пример документа  <тело> <управление видео>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *