Атрибут autoplay в HTML


Содержание

HTML Атрибут autoplay

Атрибут autoplay (от англ. «autoplay» ‒ «автозапуск, автовоспроизведение») устанавливает автоматическое воспроизведение аудио/видео файла. Воспроизведение начинается сразу после полной загрузки веб-страницы и при условии, что данный аудио/видео файл начнёт воспроизведение без остановок (прерываний).
Атрибут autoplay отменяет действие атрибута preload.

Совет: Рекомендуется вместо скриптов автозапуска аудио/видео файла использовать атрибут autoplay, так как он позволяет пользователю отменить автоматическое воспроизведение, когда это необходимо.

Синтаксис

Значения

Данный атрибут является логическим атрибутом. Может указываться либо без значения, либо с пустым значением, либо со значением «autoplay».

HTML | autoplay Attribute

The HTML autoplay Attribute is used to specify that the audio/video should automatically start playing when web page is loaded. It is a Boolean attribute.

Syntax:

Uses It can be used with and element.

Example 1: Here the autoplay attribute is used with the tag.

Output:

Example 2: Here the autoplay attribute is used with the tag.

Output:

Supported Browsers: The browser supported by HTML autoplay attribute are listed below:

  • Google Chrome 4.0
  • Internet Explorer 9.0
  • Firefox 3.5
  • Safari 4.0
  • Opera 10.5

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the «Improve Article» button below.

HTML5 + CSS 3 — How to autoplay v > Ask Question

How can I create a div that contains an autoplay video silently like this site? Can I achieve that with HTML5 and CSS3?

I inspect that and I get this bunch of code that I don’t understand:

Do I have to convert and host the video elsewhere first?

I tried with HTML5 video tag but it does not work at all:

3 Answers 3

for more info about video tag attributes Click Here

if you want to source youtube video on video tag than refer this question

To autoplay video you could use embeded iframe provided by YouTube and that would be fairly simple:

You can find more information on parameters you can pass to iframe here.

But, to autoplay video silently you will need to use JavaScript. Here is the example of similar to your question:

Can I achieve that with HTML5 and CSS3?

Yes, you can, though the link https://www.youtube.com/watch?v=e3Nl_TCQXuw does not return a video, it return youtube’s page with that video loaded, so you need to access it in another way, or download it as a video and host it elsewhere.

Here is a sample showing the code work when the source is a valid video.

I inspect that and I get this bunch of code that I don’t understand:

Реализация v >

В статье описаны строение audio и video контейнера HTML5, теги video, audio, source, track и их атрибуты с возможными значениями. Приведены HTML шаблоны и примеры реализации воспроизведения мультимедийных файлов на основе встроенных в браузер возможностей. Показано подключение к видео текстовой дорожки субтитров, заголовков, оглавления при помощи файлов формата WEBVTT с примерами. Представлены HTML5 шаблоны кода с микроразметкой по schema.org для аудио и видео. Указаны основные для web форматы аудио и видео файлов с их MIME типами и инструменты для конвертации видео и аудио в эти форматы.

В HTML5 присутствуют новые возможности, позволяющие выполнять проигрывание аудио и видео файлов напрямую браузером без использования сторонних программ. Пока, несмотря на то, что HTML5 уже не новость, имеются еще разногласие в том, как браузеры обрабатывают теги video и audio и как отображают сам плеер. Одни это делают все лучше с каждой новой версией, другие пока еще отстают. Глобально же, тенденция идет к тому, что браузеры будут предоставлять все больше функционала для проигрывания мультимедиа файлов.

Скринкаст: Видео обзор этой статьи

HTML5 video не поддерживается вашим браузером. Скачать видео

Скринкаст: видео обзор статьи Реализация video и audio в HTML5, шаблоны, schema.org микроразметка на сайте Andew.ru

Скринкаст: Пример использования шаблонов

HTML5 video не поддерживается вашим браузером. Скачать видео

Скринкаст: примеры использования шаблонов из статьи Реализация video и audio в HTML5, шаблоны, schema.org микроразметка — andew.ru

В HTML5 воспроизведение браузером аудио и видео файлов реализуется посредством тегов и , которые предоставляют управляемый сценариями объект. Использование этих тегов позволяет проиграть мультимедийный файл на web странице, управлять его воспроизведением путем задания атрибутов для тегов и , и дополнительных, вложенных в них тегов. В простейшем варианте использования достаточно вставить на web страницу нужный вам тег или и задать через их атрибуты несколько параметров. И это уже позволит проиграть мультимедиа файл на странице в HTML5 плеере. Также, поскольку элементы и являются объектами для JS, у них доступны свойства, методы и события, что предоставляет расширенные возможности полного управления HTML5 плеером через JavaScript . Однако, ввиду того, что браузеры могут иметь различия в реализации управления объектами аудио и видео посредством JS, то более лучшим выбором для этих целей будет использование специальных кроссбраузерных JS библиотек. Одна из таких библиотек под названием v > будет описана в отдельном посте. К тегам и , как и к другим тегам HTML применима стилизация посредством CSS. Детальную спецификацию для аудио и видео в HTML5 можно посмотреть на сайте World W > .

HTML5 видео и аудио развивающийся стандарт и он не связан ни с одним форматом аудио или видео, поэтому между браузерами существуют различия в поддерживаемых ими форматами аудио и видео файлов. Это различие сейчас компенсируют тем, что кодируют оригинальный файл несколькими разными кодеками и подключают все эти версии файлов к тегам или через вложенные теги . Однако среди поддерживаемых браузерами форматов аудио и видео файлов намечаются лидеры. Для видео это, конечно же, формат mp4 (H.264), и для аудио это формат mp3 и m4a. Сейчас уже, наверное, все браузеры способны проигрывать файлы этих форматов. Так же, браузеры Firefox, Chrome и Opera договорились поддерживать стандарт WEBM в качестве общего видео формата. С моей точки зрения, оптимальным на сейчас вариантом использования HTML5 видео и аудио будет схема основанная на использовании одного мультимедийного файла в формате mp4(H.264) для видео и m4a для аудио и JS HTML5 плеера. К аудио или видео контейнеру подключается только один файл в указанном формате. Сейчас большинство браузеров способны воспроизводить mp4 формат. Подключенная же JS библиотека выполнит стилизацию встроенного в браузер плеера. Если браузер не будет поддерживать формат mp4/m4a, то JS плеер, в таком случае, реализует подключение Flash плеера для воспроизведения мультимедийного файла. Учитывая, что mp4 формат стал сильно популярен, можно надеяться на низкую вероятность проблем с его воспроизведением в браузерах. Такая схема требует наличие всего одного мультимедийного файла в указанном формате, что экономит место на диске и ресурсы для обработки файлов. Также, такая схема будет стратегически более правильной, так как тенденция идет к тому, что браузеры все больше и лучше выполняют реализацию HTML5 видео и аудио.

Для указания HTML5 плееру проигрываемого файла нужно, помимо URL файла, передать и MIME тип файла, что бы браузер понимал какой кодек ему нужно использовать. Ниже в таблице привожу наиболее распространенные форматы файлов и их MIME типы.

Форматы файлов и их MIME типы

Файлы мультимедиа Расширения Mime тип
Аудио mp3 mp3 audio/mpeg
Аудио mp4 m4a audio/mp4
Аудио webm webm audio/webm
Аудио ogg ogg audio/ogg
Видео mp4 (H.264) mp4 video/mp4
Видео webm webm video/webm
Видео ogg ogv video/ogg

Инструменты кодирования аудио и видео файлов

Пример стандартного использование HTML5 тега :

Пример HTML5 audio

HTML5 audio не поддерживается вашим браузером.

HTML5 код примера audio с микроразметкой schema.org:


Так будут выглядеть извлеченные из кода данные микроразметки для описанного выше шаблона аудио.

Минимальная разметка аудио по schema.org должна включать itemprop= «name» , itemprop= «description» , itemprop= «contentUrl» . Остальные свойства не являются обязательными.

Пример стандартного использование HTML5 тега :

В демонстрации я применил для тега через атрибут class CSS стили, делающие ширину области видео динамической в зависимости от размера экрана. По высоте плеер подстроиться сам. Попробуйте изменить размер окна браузера для того, что бы увидеть как это работает. Поэтому в источнике кода этой демонстрации нет атрибутов width и height для тега , их заменяют CSS стили. Но в листинге кода шаблона этот примем не показан, т.к. является уже частностью.

Пример HTML5 v >

HTML5 video не поддерживается вашим браузером.

HTML5 код примера video с микроразметкой schema.org:

Так будут выглядеть извлеченные из кода данные микроразметки для описанного выше шаблона видео.

Минимально необходимая для поисковиков разметка видео по schema.org должна включать все приведенные в коде примера свойства itemprop за исключением блока itemprop= «author» , который является не обязательным для поисковиков и его можно удалить, если нет данных для его заполнения. Для v >»thumbnail» в виде ImageObject, а Google требует указывать как itemprop= «thumbnailUrl» , поэтому приходиться вставлять v > , google валидатор . Основное преимущество от использования микроразметки заключается в удобстве такого контента для поисковых роботов и роботов социальных сетей. Эти роботы извлекают размеченные данные и агрегирую их. Поэтому использование микроразметки улучшает SEO сайта и способствует автоматическому распространению данных в социальных сетях. Детальное описание микроразметки Schema.org для видео размеченных схемой V > . Так же, стоит заметить, что для случаев, когда вы делаете вставку на свой сайт видео не напрямую, а с помощью виджетов видео хостинга Яндекс.Видео или YouTube, то вы можете под блоком кода виджета добавить свой блок кода HTML с описанием видео и в него встроить микроразметку Schema.org для этого видео. При этом, в качестве параметра URL — ссылки на видеоролик, указать не прямую ссылку на статический файл, а задать ссылку полученную от видео хостинга. Хотя в спецификации Schema.org и написано, что ссылка должна быть именно на прямой файл, но поисковики обрабатывают и ссылки на видео от видео хостинга (см. в примерах на сайте Яндекса в разделе Вебмастер), несмотря на то, что по такой ссылке нельзя скачать файл и нельзя просмотреть его напрямую в своем HTML5 медиа плеере на странице, только в виджете видео хостинга.

Если перед вами стоит вопрос с какого хостинга загружать мультимедийные файлы аудио и видео, то посмотрите статью Yandex Disk REST API jQuery Plugin, в которой описан вариант вставки медиа файлов на WEB страницу с Яндекс Диска.

Атрибуты и тегов:

Атрибуты src, preload, autoplay, mediagroup, loop, muted, controls являются общими атрибутами для всех медийных элементов, в том числе и для тегов и .

атрибут autoplay:

  • атрибут autoplay задается его присутствием в теге или и для этого атрибута не нужно задавать значение, достаточно просто его присутствия. Для редакторов HTML, которые правят код элементов, можно задать этот атрибут как autoplayautoplay«, что равносильно просто присутствию атрибута. Наличие атрибута autoplay дает команду браузеру начать воспроизведение файла сразу после загрузки web страницы. Соответственно, атрибут autoplay отменяет значения атрибута preload, который управляет загрузкой видео в плеер, потому что видео должно сразу начать воспроизводиться, а значит и должно быть загружено. По умолчанию атрибут autoplay отсутствует.

атрибут controls:

  • атрибут controls дает команду браузеру показывать панель управления плеером, когда страница загрузилась, но воспроизведение записи на начато. Этот атрибут также как и атрибут autoplay задается только присутствием в теге или , и не требует значения, достаточно только его присутствия. По умолчанию этот атрибут отсутствует, т.е. плеер не показывает панель управления до начала воспроизведения. Когда же проигрывание файла будет запущено, то панель управления будет появляться при наведении указателя мыши на область плеера.

атрибут loop:

  • атрибут loop заставляет плеер воспроизводить файл по кругу. Атрибут задается только его присутствием в теге или и не имеет параметров. По умолчанию атрибут loop отсутствует.

атрибут preload:

  • атрибут preload определяет загрузку файла вместе с загрузкой web страницы и принимает одно из следующих трех значений:
    • none — не выполнять загрузку файла вместе с загрузкой web страницы. Это значит, что файл начнет загружаться в плеере только после нажатия кнопки воспроизведения. Это может быть удобным для ускорения загрузки страницы. Значение none является значением по умолчанию для атрибута preload, поэтому для него можно вообще не вставлять атрибут preload в тег или для этого случая.
    • metadata — не выполнять загрузку файла вместе с загрузкой web страницы, но выполнять загрузку метаданных мультимедийного файла.
    • auto — выполнять полную загрузку файла вместе с загрузкой web страницы. В этом варианте браузеры будут автоматически подгружать медийный файл вместе с web страницей, но это не будет мешать загрузке самой страницы и ее отрисовки в браузере. Если в теге или задан атрибут preload=«» с пустым значением, то будет использовано значение auto для него.
    • Значение атрибута preload будет отменено, если использован атрибут autoplay.

атрибут src:

  • атрибут src тега или позволяет сразу в теге задать путь к мультимедийному файлу. Путь может быть, как полным с указанием протокола и домена, так и относительно корня текущего сайта. Также путь к файлу можно задать и во вложенных в аудио или видео контейнер тегах .

Атрибут poster тега video:

  • атрибут poster используется только в теге и задает URL изображения (gif, png, jpeg и т.п.), которое будет показано пока видео не доступно. Если атрибут poster не задан, то плеер браузера будет пытаться показать первый кадр видео.

Атрибуты width и height тега video:

  • атрибуты width и height применяются только к тегу и задают, соответственно, ширину и высоту области воспроизведения видеоплеера. В качестве значения ожидают положительное целое число, указанное в пикселях или процентах. Задание этих атрибутов влияет на размер отображения видео, но не изменяет пропорции видео. Видео подстроиться под указанные размеры с сохранением его пропорций. Если указанные размеры не совпадают с пропорциями видео, то по верхним или/и по боковым краям видео будут темные полосы. Поэтому при задании этих параметров желательно подбирать их соотношение такое же, как у воспроизводимого видео, или задавать только w >.

Атрибут muted:

  • атрибут muted устанавливает своим наличием в тегах или звук в выключенное состояние в HTML5 плеере. По умолчанию атрибут отсутствует.

Атрибут crossorigin:

  • атрибут crossorigin указывает браузеру на необходимость выполнение CORS запроса для данного элемента. По умолчанию атрибут отсутствует, что значит не использовать CORS запросы вообще. При наличии атрибута возможны следующие значения: anonymous и use-credentials. CORS (Cross-origin resource sharing ) — это технология современных браузеров, которая позволяет управлять разрешениями на загрузку ресурсов на текущей web странице с других доменов, отличных от домена текущей страницы. Поддержка браузерами стандарта CORS позволяет реализовать безопасный кроссдоменный обмен данными через выполнение специального запроса (заголовка) к домену текущей страницы на предмет того, разрешается ли загружать на этой странице ресурсы с другого указанного домена. Сервер на такой запрос должен указать домены, с которых разрешена загрузка ресурсов.

Атрибут mediagroup:

  • атрибут mediagroup позволяет объединить управление несколькими медиафайлами в один MediaController через создание группы медиафайлов в разных местах страницы. Это группа будет управляться одновременно для всех входящих в нее файлов. Это удобно, например, если нужно проиграть и управлять одновременно одним и тем же роликом в разных местах страницы с разными субтитрами, или разными роликами.


Теги и требуют наличие закрывающего тега.

Для тех случаев, когда браузер не поддерживает HTML5 и теги, что сейчас большая редкость, пред закрывающим контейнер тегом пишут текстовое сообщение и обычно добавляют ссылку на скачивание файла. Если же встроенный в браузер HTML5 плеер будет дополнительно управляться JS библиотекой (JS плеером), то большинство из них выполняют подключение флэш плеера в случае невозможности воспроизведения в браузере HTML5 видео и аудио по причине не поддержки браузером тегов видео и аудио или формата мультимедийного файла.

Путь к проигрываемому файлу также можно задать и при помощи тега с атрибутом src, размещенного внутри тегов или . Тег не имеет закрывающего тега.

В большинстве случаев тег выглядит так:

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

Атрибуты тега :

  • атрибут src=«URL» тега задает URL к мультимедийному файлу. Путь может быть как полным с указанием протокола и домена, так и относительно корня сайта.
  • атрибут type=»MIME-тип» тега или более полно type=’MIME-тип; codecs=»кодек»‘ указывает MIME-тип файла и кодек. Для аудио достаточно указать MIME-тип, например, для .mp3 — type=»audio/mpeg». Хотя по спецификации для видео в атрибуте type нужно указывать и кодек, но сейчас часто указывают только MIME-тип без кодека, предоставляя это на решение браузерам.
  • атрибут media=»all|braille|handheld|print|screen|speech|projection|tty|tv» тега указывает тип устройства, для которого должен воспроизводиться файл. Значение по умолчанию all, поэтому этот атрибут в большинстве случаев не указывают вообще, если не хотят конкретно определить устройство для воспроизведения.

Для HTML5 видео возможно также отображать в плеере дополнительную дорожку с информацией, такой как субтитры (subtitles), заголовки (captions), главы (chapters), описания (descriptions – не поддерживаются пока) и метаданные (metadata – не поддерживаются пока). Эта возможность реализуется путем добавления внутри тега тегов с соответствующими атрибутами.

Тег позволяет подключать к видео дополнительные файлы-дорожки специального формата WebVTT (Web V > ), в которых указаны выводимые текстовые сообщения с их временной привязкой к видео файлу. Стандарт WebVTT поддерживает не просто вывод текстовых сообщений, но и предоставляет варианты его CSS стилизации и опции по размещению в области просмотра видео. На настоящий момент WebVTT файлы в основном используются для подключения к видео текстовых субтитров, что поддерживается почти всеми браузерами. Другие возможности WebVTT стандарта пока не полностью реализуются самими браузерами, поэтому, для более полного использования WebVTT, лучше применять JS плееры. Также, файлы WebVTT могут нестандартно использоваться JS плеерами для передачи дополнительных данных в JS плеер, таких как, например, URL превью картинок для фреймов видео. К вопросу о том, как показать превью кадров видео на шкале перемотки плеера (Scrub Bar Thumbnails) как это сделано на видео хостингах. Тут нужно сказать, что такой функционал пока отсутствует во встроенных в браузеры плеерах и поэтому реализуется через JS плееры как дополнение. Для этого подключают JS библиотеку (js плеер), которая берет на себя управление HTML5 видео и аудио объектом и выполняет его стилизацию. Такие JS плееры для показа превью кадров видео нестандартно используют файлы WEBVTT из тега для передачи через него URL картинок превью.

Файл формата WebVTT является обычным текстовым файлом с расширением .vtt в котором, в виде построчного списка, прописаны временные метки с временем старта и временем окончания и текстовые сообщения для вывода к этим меткам. К контейнеру можно подключить несколько файлов WebVTT с текстом на разных языках. Для каждого языка нужно создавать отдельный файл и подключать каждый через тег. Теги необходимо вставлять внутрь контейнера после всех тегов , но перед сообщениями об ошибках HTML5 видео. Тегс файлом субтитров на языке по умолчанию нужно размешать первым среди теговв текущем контейнере .

WEBVTT файл может содержать одну и более временных меток. Файл начинается со слова WEBVTT. Пустые строки отделяют между собой временные метки с принадлежащими к ним текстом и атрибутами. Текст может содержать элементы HTML и CSS разметки. Перед временной меткой может располагаться ID для нее, что бы при помощи специальных выражений обратиться к ней. Все эти детали описаны в стандарте WEBVTT.

00:00:01.000 00:00:10.000 -это простой пример временной метки в формате hh:mm:ss.mmm

00:00:15.000 00:00:20.000 A:middle T:50% — метка может содержать дополнительные атрибуты, указывающие на месторасположение текста для нее в области просмотра видео.

Пример файла формата WEBVTT для субтитров на ru

Атрибуты тега :

Атрибут kind тега задает тип дорожки и может принимать значения:

  • subtitles — субтитры в виде текста, который выводиться поверх видео. Для проигрываемого файла можно задать субтитры на разных языках для предоставления их выбора в плеере, если он его поддерживает. В большинстве случаев используется именно этот тип так он поддерживается большинством браузеров.
  • captions – заголовки в виде текста и звука, которые выводятся поверх видео. Похожи на субтитры, но, помимо текста, могут включать звуковые эффекты и другую аудио информацию.
  • chapters – главы, которые отображаются текстом в виде меню списка и предназначены для быстрой навигации по медиафайлу.
  • descriptions – описание, это текстовые файлы с описанием видео для воспроизведения их в screenreader.
  • metadata – метаданные для передачи js скриптам.

Атрибут src тега задает URL к файлу дорожки с дополнительной информацией. Подключаемый к тегу файл имеет формат WebVTT и расширение .vtt.

Атрибут srclang тега задает язык дорожки через код языка. Для русского языка будет равен «ru», для английского «en».

Атрибут label тега задает название дорожки, которое будет показано в плеере. Если атрибут не будет задан, то браузер покажет свое служебное название.

Атрибут default тега задает выбор данной дорожки по умолчанию при наличии других дорожек в контейнере video. Только один из нескольких тегов может иметь default атрибут. Лучше дорожку по умолчанию располагать первой среди других подключаемых дорожек.

Атрибут autoplay в HTML

Для встраивания видео контента в документ используйте элемент HTML . Видео элемент может содержать один или несколько источников видео. Чтобы указать источник видео, необходимо использовать атрибут src или элемент указывает несколько медиа-ресурсов для элементов

Для просмотра списка поддерживаемых форматов, перейдите по ссылке Поддерживаемые аудио и видео элементами форматы мультимедийных файлов.

Контекст Использования

  • Допустимое содержимое. Если элемент имеет атрибут src : 0 или более элементов используется как дочерний элемент медиа-элементов and . Позволяет указать синхронизированные текстовые дорожки (или данные на основе времени), например, для автоматической обработки субтитров. Файлы треков используют формат WebVTT (.vtt файлы) — Web Video Text Tracks или Timed Text Markup Language (TTML).»> , за которым следует прозрачный контент, который не содержит элементов мультимедиа: используется для встраивания звукового контента в документ. Он может содержать один или более источников аудио, представленных с помощью атрибута src или элемента – браузер выберет один наиболее подходящий. Он так же может предназначаться для потокового мультимедиа, используя интерфейс MediaStream.»> или . Видео элемент может содержать один или несколько источников видео. Чтобы указать источник видео, необходимо использовать атрибут src или элемент ; браузер сам определит наиболее подходящий источник.»>
    Иначе: 0 или более элементов указывает несколько медиа-ресурсов для элементов

, и . Это пустой элемент. Он обычно используется для обслуживания одного и того же медиа-контента в нескольких форматах, поддерживаемых различными браузерами.»> , за которыми следует 0 или более элементов используется как дочерний элемент медиа-элементов and . Позволяет указать синхронизированные текстовые дорожки (или данные на основе времени), например, для автоматической обработки субтитров. Файлы треков используют формат WebVTT (.vtt файлы) — Web Video Text Tracks или Timed Text Markup Language (TTML).»> , затем прозрачным содержимым, которое не содержит элементы мультимедиа: используется для встраивания звукового контента в документ. Он может содержать один или более источников аудио, представленных с помощью атрибута src или элемента – браузер выберет один наиболее подходящий. Он так же может предназначаться для потокового мультимедиа, используя интерфейс MediaStream.»> или . Видео элемент может содержать один или несколько источников видео. Чтобы указать источник видео, необходимо использовать атрибут src или элемент ; браузер сам определит наиболее подходящий источник.»> .

Content categories Flow content, содержание фраз, встроенный контент. Если имеет атрибут controls : становится интерактивным элементом с осязаемым содержанием.
Tag omission Нет, открывающий и закрывающий теги обязательны.
Допустимые родительские элементы Любой элемент, который принимает встроенный контент.
DOM интерфейс HTMLVideoElement

Атрибуты

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

autoplay Логический атрибут ; если указан, то видео начнет воспроизводится автоматически , как только это будет возможно сделать без остановки , чтобы закончить загрузку данных . autobuffer Логический атрибут; если указано, видео автоматически начнет буферизацию, даже если оно не настроено на автоматический запуск. Используйте этот атрибут только тогда, когда очень вероятно, что пользователь будет смотреть видео. Видео буферизуется до тех пор, пока не заполнится кэш мультимедиа.

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

События

The element can fire many different events.

Примеры

The first example plays a video, starting playback as soon as enough of the video has been received to allow playback without pausing to download more. Until the video starts playing, the image «posterimage.jpg» is displayed in its place.

The second example allows the user to choose between different subtitles.

Multiple Sources Example

You can try the preceding example on HTML5 video demo example with live preview code editor.

Server support

If the MIME type for the video is not set correctly on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).

If you use Apache Web Server to serve Ogg Theora v > The most common video file type extensions are «.ogm «, «.ogv», or «.ogg» . To do this, edit the «mime.types» file in «/etc/apache» or use the «AddType» configuration directive in httpd.conf.

If you serve your videos as WebM, you can fix this problem for the Apache Web Server by adding the extension used by your video files («.webm» is the most common one) to the MIME type «video/webm» via the «mime.types» file in «/etc/apache» or via the «AddType» configuration directive in httpd.conf.

Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.

Интерфейс DOM


Этот элемент реализует интерфейс HTMLVideoElement .

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 3.0 3.5 (1.9.1) 9.0 10.5 3.1
autoplay attribute 3.0 3.5 (1.9.1) 9.0 10.5 3.1
buffered attribute ? 4.0 (2.0) ? (Да) ?
controls attribute 3.0 3.5 (1.9.1) 9.0 10.5 3.1
crossorigin attribue ? 12.0 (12.0) ? ? ?
loop attribute 3.0 11.0 (11.0) 9.0 10.5 3.1
muted attribute 30.0 11.0 (11.0) 10.0 (Да) 5.0
played property ? 15.0 (15.0) ? (Да) ?
poster attribute 3.0 3.6 (1.9.2) 9.0 10.5 3.1
preload attribute 3.0 4.0 (2.0) 9.0 (Да) 3.1
src attribute 3.0 3.5 (1.9.1) 9.0 10.5 3.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 1.0 (1.0) ? ? ?
autoplay attribute ? 1.0 (1.0) 8.1 ? (Да) [1]
buffered attribute ? 4.0 (2.0) ? ? ?
controls attribute ? 1.0 (1.0) ? ? ?
loop attribute ? 11.0 (11.0) 8.0 ? 6.0
muted attribute ? 11.0 (11.0) 8.0 ? ?
played property ? 15.0 (15.0) ? ? ?
poster attribute ? 1.0 (1.0) ? ? ?
preload attribute ? 4.0 (2.0) ? ? ?
src attribute ? 1.0 (1.0) ? ? ?
crossorigin attribute ? 12.0 (12.0) ? ? ?

[1] This feature is only available on iOS 6.0.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Также, в html5 v >

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

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

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

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

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

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

К сожалению, ваш браузер не поддерживает HTML5 Video.

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

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

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

У тега source есть атрибут type, в котором мы указываем MIME тип и кодеки.

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

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

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

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

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

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Освоение HTML5 тега audio

    С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег на ваших сайтах.

    Воспроизведение звука в цикле

    Различные форматы файлов

    Для старых браузеров

    Управление воспроизведением через JavaScript

    Читают сейчас

    Похожие публикации


    • 26 сентября 2011 в 12:04

    HTML5: старые теги нового назначения

    Проблемы с HTML5

    HTML5 Audio и Game Development: баги браузеров, проблемы и их решения, идеи

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Комментарии 19

    Используем audio для вставки звукового файлу на сторінку

    Для незнающих украинских — имеется в виду «на страницу»?

    И «файл wtkbrjv» — файл целиком :)

    Обратите внимание на атрибут autoload, который используется для автоматического воспроизведения звука. Тем не менее Вам не следует автоматически воспроизводить звуки а сайте, ведь это надоедает пользователям.

    так autoload или autoplay?

    >Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого.

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

    С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах.

    Никого не насторожило, что с 1-й строчки идёт неправда? Издревле альтернативами флешу были теги object и embed, которые работали напрямую с звуковыми файлами, сильно зависели от настроек ОС и установленных кодеков, но всегда были независимы от флеша. И никогда не исчезали из браузеров.

    Так вот, почему бы, даже если и перевод, не поправить автора сочинения? Как обычно, в скобках «прим. перев.». Зачем вообще переводить автора, не полностью разбирающегося в теме? Лучше взять правильную часть, проверить, если надо, и написать своими словами. Тем более, что в комментах уже пишут, что и данные теги работают с глюками, поэтому не могут быть решением.

    Возможно, я уже начитался кучи всего по и мне кажется эта информация просто убогой бесполезной, детской… Если в гугле набрать , то выдаст кучу ответов, где написано то же самое что и в этой статье… тогда — зачем переводить было?

    Вот это лучше бы перевели, если так сильно хотелось что-то сделать.

    Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег audio.

    У сервера неправильно прописан MIME тип для ogg (application/octet-stream), из-за этого Firefox не играет (в отличие от Оперы и Хрома). Может автор знает, как это исправить? Отредактировать .htaccess невозможно.

    Пробовал указывать тип в тегах — не помогает.

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

    Web Press

    Статьи Вебмастеру

    Web Press

    Размещение мультимедийных элементов с помощью HTML5

    Категория

    До недавнего времени добавление в документ мультимедийного элемента осуществлялось с помощью громоздкого кода. Однако появление HTML5 существенно облегчило задачу веб-мастеру, теперь встроить в веб-страницу видео или звук можно с помощью одного парного тега с простыми и понятными атрибутами:

    Мультимедийные форматы

    На сегодняшний день существует множество мультимедиа форматов для кодирования видео и звуковых файлов. Браузеры различных производителей могут поддерживать одни из них и не поддерживать другие. Поэтому ознакомьтесь с ниже приведенной таблицей, в которой приведен список из форматов и браузеров, а также связь между ними.

    Рис. 1. Таблица популярных форматов.

    Вставка аудио файла

    Ознакомившись с форматами, перейдем к добавлению аудио на веб-страницу, для этого воспользуемся парным тегом , его атрибуты:

    Примеры по добавлению аудио

    Воспроизведение звукового файла =»music.ogg», сразу после загрузки веб-страницы, при этом аудио ролик никак не отобразится в документе.

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

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

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

    Рис. 2. Внешний вид аудио проигрывателя реализованного с помощью HTML5

    На сегодняшний день тег языка HTML5, поддерживают последние версии ведущих браузеров, однако, не все пользователи обновляют свои браузеры до последних версий, вследствие чего их браузер может проигнорировать тег , и ничего не выдать на странице. Это нужно учесть и вывести сообщение соответствующего характера, к примеру “Ваш браузер не поддерживает HTML5, обновите его до последней версии”

    Рис 3. Браузер Internet Explorer версии 8 не поддерживает тег

    Вставка видео файла

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

    • SRC – значение атрибута содержит путь к воспроизводимому файлу;
    • AUTOPLAY – наличие атрибута позволяет автоматически воспроизводить видео файл;
    • AUTOBUFFER – атрибут для автоматической буферизации видео файла;
    • CONTROLS – выводит панель для управления воспроизведением видео файла;
    • TYPE – MIME формат видео файла;
    • POSTER – значение атрибута содержит путь к графическому файлу, который будет служить в качестве заставки в панели просмотра видео. Если атрибут не указан, то браузер отобразит первый кадр видео, либо темный экран;
    • WIDTH, HEIGHT – атрибут содержит размеры блока в котором отображается видео в “px”;
    • LOOP – атрибут зацикливания воспроизведения видео;

    Пример по добавлению видео

    Рис 4. Внешний вид видео проигрывателя реализованного с помощью HTML5

    лабы по информатике, егэ

    лабораторные работы и задачи по программированию и информатике, егэ по информатике

    HTML Урок 8. Вставка видео на сайт

    Вставка аудио

    Для вставки аудио-плеера используется следующий код:

    В браузере Google Chrome плеер будет выглядеть:

    Атрибут Значение Описание
    autoplay autoplay Указывает, что аудио должен начать играть, как только будет готов
    controls controls Указывает, что элементы управления воспроизведением должны отображаться
    loop loop Указывает, что аудио должно начаться снова, когда оно будет закончено
    preload auto
    metadata
    none
    Определяет, должно ли аудио быть загруженным при загрузке страницы
    src url Указывает адрес аудио для проигрывания

    Другие возможности вставки аудио на сайт

    *только для форматов: wav, mp3, aiff, wma

    Вставка видео

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

    Результат в браузере:

    Атрибут Значение Описание
    audio muted Определяет по умолчанию состояние звука. В настоящий момент только «muted» разрешено
    autoplay autoplay Если указан, видео начнет играть сразу как только оно будет готово
    controls controls Если указан, кнопки управления будут показаны, такие как кнопка воспроизведения
    height пиксели Указывает высоту видео плеера
    loop loop Если указан, видео начнет проигрываться снова, как только закончится
    poster url Указывает URL изображения, представляющего видео
    preload auto
    metadata
    none
    Если указан, видео будет загружено при загрузке страницы, и готово к запуску. Игнорируется, если «autoplay» указан
    src url Адрес URL видео для проигрывания
    width пиксели Указывает ширину видео плеера

    * для форматов mpeg, avi

    Фавикон Favicon

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

    • файлы с расширением .ico
    • размер 16×16 пикселей

    HTML атрибут видео автозапуск

    примеров

    Установите для автоматического воспроизведения видео элементов:

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

    Все основные браузеры поддерживают атрибут автовоспроизведением.

    Примечание: Internet Explorer 8 и более ранние версии IE не поддерживают тег .

    Определение и использование

    Атрибут автозапуск это свойство булево (Boolean).

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

    Различия между HTML 4.01 и HTML5

    тег новые теги HTML5.

    Разница между HTML и XHTML

    В XHTML, свойство не допускается стенографии, атрибут автозапуск должен быть определен как: .

    Илон Маск рекомендует:  Как изменить шрифта hint'а
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL