Embed и object — Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах


Содержание материала:

Embed и object — Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах

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

Кроме того, мы рассмотрели четыре основных способа добавления аудио плеера на сайт. Ну, что же, давайте перейдем к практике.

Создадим html страницу, на которой осуществим задуманное. И, для начала, давайте сделаем всё это на своём компьютере, а затем уже, разместим страницу с плеером на сайте.

Для удобства, создадим рабочую папку, где будут располагаться файлы для нашей работы. Присвоим имя рабочей папки, например — audio. Скопируем в эту папку аудио файл, который мы хотим воспроизвести на странице сайта, пусть это будет файл с именем — track_1.mp3.

Далее, поместим в эту же папку, html файл нашей экспериментальной страницы с именем index.html. Пусть html код этой страницы, в исходном виде, содержит только обязательные теги html. Тогда её код будет выглядеть следующим образом:

Плеер для сайта

Урок 15. Как вставить видео на страницу сайта средствами HTML?

Как вставить видео на сайт средствами HTML?

Есть два вида вставки видео на сайт: видео с другого ресурса (Youtube, Yandex video, Rutube и другие) и видеофайл, который уже загружен на сайт и открывающийся прямой ссылкой.

Самый простой в исполнении — первый способ. Однако у него есть как плюсы, так и минусы. В случае загрузки видео со специального видеосервиса нужно выполнить три пункта:

1. Зарегистрироваться на видеосервисе (Например: Youtube , Yandex video , Rutube )
2. После регистрации у Вас появится возможность загрузить видео
3. Получить код видео и вставить к себе на сайт

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

Код HTML

Настройки окна видео подстраиваете под себя: width (ширина в пикселях), height (высота в пикселях). В ссылке http://video.rutube.ru/7c806393a9705797d7e92c4a05493d5d при выборе другого видео достаточно поменять код видео, который подчёркнут. Тег embed используется для старых настроек браузеров, поэтому там также не забываем поменять размеры видео и тд, иначе при просмотре через другой браузер окно с видео будет отличаться.

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

Поскольку простых путей не ищем, то предположим, что Вы хотите вставить SWF-файл. Существует множество плееров доступных он-лайн. Например, FlowPlayer ( скачать FlowPlayer ). После скачивания архива загрузите его на сайт в папку с соответствующим названием flowplayer. После этого надо прикрепить к странице с видео данный плеер, для этого вставляем в head следующую строку:

Код HTML

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

Из плюсов данного метода хотел бы отметить отсутствие рекламы при проигрывании видео и, при нормальной работающем хостинге(!), быструю загрузку видео.

Короткий код вставки видео с Youtube на сайт

На этот случай достаточно одной строки кода с использованием iframe. В коде будет менять только http://www.youtube.com/embed/WRtAVxqacQM короткий идентификационный код для видео. Также по желанию можно изменить размеры окна видео: width (ширина в пикселях), height (высота в пикселях).

Код HTML (вставляем куда угодно в body документа)

И наслаждаемся клипом LP!)

Вставка видео или тег video в HTML5

Позволяет встраивать, воспроизводить и управлять настройками видеоролика на веб-странице.
Синтаксис

Атрибуты тега video
autoplay — Видео начинает воспроизводиться автоматически после загрузки страницы.
controls — Добавляет панель управления к видеоролику.
height — Задает высоту области для воспроизведения видеоролика.
loop — Повторяет воспроизведение видео с начала после его завершения.
poster — Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
preload — Используется для загрузки видео вместе с загрузкой веб-страницы.
src — Указывает путь к воспроизводимому видеоролику.
width — Задает ширину области для воспроизведения видеоролика.

Пример кода тега video

Вставка видео с помощью в html-страницу при помощи embed

Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает. Чем метод отличается от предыдущих? В большинстве случаев, подобные объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы.

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

Используемые атрибуты тега embed
align — определяет как объект будет выравниваться на странице и способ его обтекания текстом
height — высота объекта
hidden — указывает, скрыть объект на странице или нет
hspace — горизонтальный отступ от объекта до окружающего контента
pluginspage
Адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру
src — как и везде — это путь к файлу
type — MIME-тип объекта
vspace — вертикальный отступ от объекта до окружающего контента.
width — ширина объекта

Спасибо за внимание! И успехов при вставке видео на сайт!)

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

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

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 тег

Html тег используется далеко не часто на страницах. Его предназначение — встраивание каких-то объектов на страницу. Например, флэш-ролики, флэш-игры, видео, музыка и т.п. Является блочным элементом (занимает какую-то прямоугольную область на странице).

Синтаксис очень короткий, но зато атрибутов у тега очень много.

Атрибуты

  • align=»значение» — задание расположения относительно других объектов. Может принимать значения
    • center
    • right
    • left
  • autostart=»true/false» — включить или отключить автостарт. Если автостарт включен, то проигрывание начинается сразу же после загрузки страницы
  • bgcolor=»значение» — задает цвет фона (либо в виде #XXXXXX, либо название цвета). Поскольку объект уже имеет какой-то цвет, то особого смысла в использовании нету.
  • height=»значение» — высота объекта в пикселях или процентах. Например, 300px или 100%.
  • h — отвечает за видимость объекта (false — объект виден, true — скрыт)
  • hspace=»значение» — горизонтальный отступ от границы до объекта. Значение задается в пикселях.
  • vspace=»значение» — вертикальный отступ от границы до объекта. Значение задается в пикселях.
  • loop=»значение» — количество циклов для проигрывания.
  • pluginspage=»Адрес_URL» — если у браузера нету возможности открыть объект через свои средства, то загружается внешний плагин, через который и происходит загрузка. Например, pluginspage=»http://www.macromedia.com/go/getflashplayer»
  • src=»https://zarabotat-na-sajte.ru/uroki-html/%D0%B0%D0%B4%D1%80%D0%B5%D1%81_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%B0″ — адрес объекта для подключения
  • type=»тип_файла» — определяет MIME-тип файла. Может принимать значения
    • application/x-shockwave-flash
    • image/gif
    • video/mp4
  • volume=»значение» — уровень громкости
  • w — задаает ширину объекта в пикселях или процентах.
  • menu=»true/false» — включить или отключить меню.

Примеры использования

1. Например, можно вставить к себе на сайт ролик из youtube или из другого места (можно указать и просто адрес видео на вашем сайте).

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

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

В чём разница между тегом embed и тегом object?


Ведь они одну и ту же работу выполняют (отрывки из htmlbook):

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

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

Реализация 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 атрибут. Лучше дорожку по умолчанию располагать первой среди других подключаемых дорожек.

Мультимедиа в стиле HTML 5: теги AUDIO и VIDEO

Уже совсем скоро Microsoft представит новую версию Internet Explorer, девятую по счету. Помимо усовершенствованного пользовательского интерфейса, она предлагает множество других возможностей. В том числе и в плане поддержки новой, и долгожданной, версии языка разметки веб-страниц — HTML 5.

Веб-дизайнерам самое время задуматься о переходе на новую версию HTML. Ведь практически все современные веб-обозреватели — Mozilla Firefox, Opera, Google Chrome и Apple Safari — уже её поддерживают. Ну, может быть, не полностью (ведь окончательная спецификация HTML 5 ещё не принята), а только некоторые возможности. В том числе и новые средства вывода на веб-страницы аудио и видео.

1. Прошлое и настоящее веб-мультимедиа
Но чем же нас не устраивают старые и вполне проверенные временем средства, имевшиеся в предыдущей версии HTML — 4.01? Давайте разберёмся.

1.1. Что было раньше
Начнём с того, что в предыдущих версиях HTML вообще не было стандартных средств поместить на веб-страницу аудио- или видеоролик. Веб-дизайнерам приходилось задействовать для этого дополнительные программы, работающие совместно с веб-обозревателем и обрабатывающие те данные, что были ему не по зубам. К таким программам относятся дополнения к веб-браузеру и элементы ActiveX.

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

Этот код помещает на веб-страницу проигрыватель Flash в виде элемента ActiveX и открывает в нём видеоролик под названием movie.swf.

У подобного подхода всего одно достоинство — применяя его, можно поместить на веб-страницу практически любые данные (конечно, при условии, что в системе установлен поддерживающий их модуль расширения или элемент ActiveX). А дальше начинаются недостатки.

  • Как уже говорилось, HTML-код, помещающий на веб-страницу мультимедийные данные, крайне громоздок и непонятен.
  • Каждый модуль расширения и элемент ActiveX поддерживает свой собственный набор параметров, с помощью которых указывается сам мультимедийный файл и настройки его воспроизведения. Вдобавок от версии к версии модуля расширения или элемента ActiveX набор поддерживаемых им параметров может меняться. Это дополнительная головная боль для веб-дизайнера.
  • Подходящий модуль расширения или элемент ActiveX должен быть установлен на компьютере посетителя. Иначе он не сможет прослушать или просмотреть мультимедийный файл.
  • Различные веб-обозреватели поддерживают дополнительные программы по-разному. Так, элементы ActiveX поддерживаются только Internet Explorer.

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

1.2. Что предлагает HTML 5
HTML 5 предлагает нам другой подход. Давайте кратко рассмотрим его основные положения:

  • Для размещения на веб-странице аудио- или видеоролика применяется всего один компактный тег, в атрибутах которого указываются интернет-адрес мультимедийного файла с этим роликом и все необходимые настройки его воспроизведения.
  • Никаких дополнительных программ для воспроизведения аудио и видео не требуется — браузер все делает сам.
  • Набор форматов файлов и кодирования аудио и видео, поддерживаемых браузером, ограничен (что и понятно: если добавить в браузер поддержку всех имеющих на данный момент хождение форматов, мы получим громоздкую и неуклюжую программу). Подробнее о форматах аудио и видео, поддерживаемых Internet Explorer 9, мы поговорим потом.

Итак, давайте посмотрим, как HTML 5 поддерживает размещение на веб-странице аудио- и видеороликов. И рассмотрим мы эту тему на примере Internet Explorer 9 (хотя, конечно, не забудем и о других браузерах).

2. Помещаем на Web-страницу аудио и видео
Сначала рассмотрим самое простое — как поместить на веб-страницу аудио- или видеоролик и какие теги HTML 5 для этого применяются.

2.1. Подготовительные мероприятия
Перед тем, как мы разместим на веб-странице аудио и видео средствами HTML 5, нам следует узнать некоторые вещи и выполнить над веб-страницами некоторые подготовительные действия. Какие именно — мы сейчас узнаем.

2.1.1. Пишем правильный
Прежде всего, чтобы браузер с поддержкой HTML 5 опознал нашу веб-страницу как написанную с применением HTML 5 и, следовательно, правильно её отобразил, нам придётся специально сообщить ему об этом. Сделать это очень просто.

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

Это обязательно! В противном случае мы, скорее всего, не увидим на веб-странице ни аудио-, ни видеороликов.

2.1.2. О кодировке
Из всех кодировок, что применяются веб-дизайнерами для своих творений, HTML 5 рекомендует использовать UTF-8.

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

Создавать текстовые файлы (а веб-страницы — это и есть текстовые файлы) в кодировке UTF-8 можно в обычном Блокноте. Просто при сохранении файла в раскрывающемся списке Кодировка, находящемся в диалоговом окне сохранения файла, выберем пункт UTF-8. Больше ничего делать не нужно.

2.2. Вставка аудиороликов. Тег
Для размещения на странице аудиоролика в HTML 5 предусмотрен парный тег .

Этот код вставляет в веб-страницу аудиоролик, хранящийся в файле sound.mp3, и выводит на экран элементы управления его воспроизведением.

Если мы откроем веб-страницу с таким аудиороликом в Internet Explorer 9, то увидим следующее — см. рис. 1. Здесь присутствует кнопка запуска и приостановки воспроизведения, регулятор, показывающий позицию воспроизведения ролика, текстовые поля, выводящие текущую позицию воспроизведения и продолжительность ролика, и регулятор громкости с кнопкой отключения звука. В общем, всё то, что мы привыкли видеть в обычных приложениях для воспроизведения музыки. И всё это без установки каких бы то ни было дополнительных программ!

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

  • CONTROLS — также атрибут без значения. Если он присутствует в теге, Internet Explorer выведет на экран набор элементов управления воспроизведением аудиоролика (как показано на рис. 1). В противном случае посетитель не будет иметь возможности приостановить или перемотать ролик. Впрочем, мы можем предоставить ему такую возможность через соответствующие веб-сценарии.
  • LOOP — атрибут без значения. Если он присутствует в теге, воспроизведение ролика после окончания начнётся снова (т.е. зациклится).
  • PRELOAD — атрибут без значения. Если он присутствует в теге, загрузка файла с аудиороликом начнётся сразу же после окончания загрузки веб-страницы. Это позволит исключить паузу между запуском ролика на воспроизведение и собственно началом его воспроизведения.
  • SRC — вероятно, самый главный атрибут. Указывает интернет-адрес мультимедийного файла, хранящего ролик.
  • 2.3. Вставка видеороликов. Тег
    Для вставки на веб-страницу видеоролика используется очень похожий тег — . Он тоже парный.

    Этот HTML-код вставляет на веб-страницу видеоролик, хранящийся в файле movie.mp4. При этом на экране будут присутствовать элементы управления его воспроизведением, а само воспроизведение начнётся сразу после загрузки веб-страницы.

    Открыв в Internet Explorer 9 веб-страницу с приведённым выше кодом, мы увидим следующее — см. рис. 2. А именно панель, в которой будет воспроизводиться видеоролик. Если навести на эту панель курсор мыши, в её ничжней части появится уже знакомый нам набор элементов для управления воспроизведением ролика. И, опять же, всё это мультимедийное богатство мы получим без установки дополнительных программ.

    Осталось только рассмотреть специфические для тега атрибуты. Прежде всего, тег поддерживает все атрибуты, знакомые нам по тегу (см. выше). Это атрибуты AUTOPLAY, CONTROLS, LOOP, PRELOAD и SRC.

    • HEIGHT — задаёт высоту панели, в которой будет выводиться видеоролик, в пикселах. Если не указан, эта панель будет иметь такую же высоту, как и высота постера (о нём — чуть позже). Если постер отсутствует, панель будет иметь высоту 150 пикселов.
    • POSTER — задаёт интернет-адрес файла с постером, графическим изображением, которое будет выводиться перед началом воспроизведения ролика. Если постер не указан, выводится первый кадр ролика.

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

    2.4. Поддерживаемые форматы
    А теперь выясним, какие же форматы поддерживает Internet Explorer 9. А именно, форматы файлов (контейнеров), кодирования аудио и кодирования видео.

    • Форматы аудиофайлов: AAC и MP3.
    • Формат видеофайлов: MPEG 4 (MP4).
    • Форматы кодирования аудио: AAC и MP3.
    • Формат кодирования видео: MPEG 4 AVC (H.264).

    Вообще, выбор форматов для поддержки несколько странен. Так, поддерживается популярнейший формат файлов MP3, но не менее популярный AVI остался за бортом. Не поддерживается формат кодирования видео MPEG IV ASP (кодеки DivX и Xvid). Также не поддерживается формат Flash Video — стандарт де факто для современного интернет-видео. Впрочем, здесь всё более-менее понятно — установить проигрыватель Flash в виде модуля расширения или элемента ActiveX проще простого.

    2.5. А что же другие Web-обозреватели?
    Вот именно! Ведь мы хотим, чтобы наши веб-страницы нормально отображались во всех браузерах, поддерживающих HTML 5. Как нам это обеспечить?

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

    Mozilla Firefox, Opera и Google Chrome:

    • Форматы аудиофайлов: WAV и OGG.
    • Формат видеофайлов: OGG.
    • Форматы кодирования аудио: WAV и Vorbis.
    • Формат кодирования видео: Theora.
    • Формат аудиофайлов: QuickTime (MOV).
    • Форматы видеофайлов: QuickTime (MOV) и MPEG 4 (MP4).
    • Формат кодирования аудио: AAC.
    • Формат кодирования видео: MPEG 4 AVC (H.264).


    Примечание:
    Ситуация с Chrome ещё до конца не ясна. Недавно корпорация Google заявила, что делает ставку на формат кодирования видео VP8. Все прочие форматы кодирования видео поддерживаться не будут. Подождём, чем всё это закончится.

    Мда, ситуация так себе. Разработчики HTML 5 грезили о временах, когда аудио- и видеоролики будут воспроизводиться на всех веб-браузерах, поддерживающих HTML 5, а на деле до этой идиллии ещё очень далеко. Гладко было на бумаге, да забыли про овраги.

    Этот подход получил название альтернативных источников. Под источниками в данном случае подразумеваются мультимедийные файлы.

    Для указания альтернативных источников используется специальный тег . Это одинарный тег.

    • Аудиофайл sound.mp3 будет воспроизведён Internet Explorer 9.
    • Аудиофайл sound.wav будет воспроизведён Firefox, Opera и Chrome.
    • Аудиофайл sound.aac будет воспроизведён Safari.

    А здесь мы указали для тега два альтернативных источника — два видеофайла.

    • Видеофайл movie.mp4 будет воспроизведён Internet Explorer 9 и Safari.
    • Видеофайл movie.ogg будет воспроизведён Firefox, Opera и Chrome.

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

    • SRC — указывает интернет-адрес мультимедийного файла-источника. Этот атрибут обязательно должен присутствовать в теге.
    • TYPE — указывает MIME-тип файла-источника. Это необязательный атрибут. Если он отсутствует, браузер определит MIME-тип файла по его расширению.

    Атрибут PRELOAD присутствует в современной версии спецификации HTML 5. Более старые её версии предусматривали атрибут AUTOBUFFER, выполняющий ту же задачу. Однако нкоторые браузеры, в частности, Firefox, всё ещё поддерживают атрибут AUTOBUFFER и не знают о существовании атрибута PRELOAD. Поэтому нам придётся указывать в теге или оба этих атрибута:

    2.5.4. А если браузер вообще не поддерживает HTML 5? Альтернативное содержимое.
    Наконец, нужно предусмотреть такую ситуацию, когда веб-страница, содержащая аудио- или видеоролик, открывается в веб-браузере, который не подерживает HTML 5 и, соответственно, теги и . Нам придётся как-то дать об этом знать посетителю и предложить ему что-то взамен.

    • Браузер с поддержкой HTML 5 проигнорирует альтернативное содержимое.
    • Браузер, не поддерживающий HTML5, наоборот, проигнорирует теги , и как не известные ему и выведет на экран альтернативное содержимое.

    спроизвести этот
    видеоролик.

    3. Управляем размещенным на веб-странице аудио и видео из веб-сценариев
    Современные веб-страницы — это не только HTML и CSS. Это ещё и веб-сценарии, написанные на языке JavaScript. С их помощью мы можем «оживить» наши творения, заставить их реагировать на действия посетителя.

    Было бы очень странно, если бы Internet Explorer 9 и другие современные браузеры с поддержкой HTML 5 не позволяли управлять размещенным на веб-странице аудио и видео из веб-сценариев. Разумеется, они позволяют это делать! И мы сейчас рассмотрим, как это делается.

    3.1. Некоторые нововведения в веб-программировании в стиле HTML 5
    Первое, что нам нужно узнать, — какие нововведения в веб-программировании принёс нам HTML 5 и какие старые приёмы, применявшиеся до этого, перестали работать. Это очень важно, так что читаем внимательно.

    3.2 Доступ к элементам веб-страницы из веб-сценариев
    Что нам нужно, чтобы получить доступ к какому-либо элементу веб-страницы (абзацу, гиперссылке, кнопку, аудио- или видеоролику наконец) из веб-сценария? Правильно — однозначно идентифицировать его каким-то образом. То есть сделать этот элемент в чём-то уникальным, отличающимся в чём-то от его «соседей» по веб-странице.

    Проще всего сделать это, дав элементу имя. Для этого используется глобальный атрибут ID, поддерживаемый всеми тегами. В качестве значения этого атрибута как раз и указывается имя.

    Так, следующий HTML-код создаёт на веб-странице аудиоролик и даёт ему имя aud1 (атрибут ID выделен полужирным шрифтом):

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

    Ранее для каждого именованного элемента веб-страницы сам браузер создавал переменную, в которой и хранился этот экземпляр. Имя этой переменной совпадало с именем элемента, тем самым, что мы указали в атрибуте ID. Так, для нашего аудиоролика браузер создал бы переменную aud1, и мы смогли бы к нему обратиться, просто указав эту переменную.

    [code]aud1.play();[/code]
    Так мы смогли бы запустить аудиоролик на воспроизведение. Метод play как раз это и делает.

    Но HTML 5 диктует новые правила.

    Для получения экземпляра объекта, представляющего элемент веб-страницы, нам теперь придётся вызвать метод getElementById объекта HTMLDocument. В качестве единственного параметра этого метода мы укажем строку с именем нужного нам элемента веб-страницы.

    Объект HTMLDocument представляет веб-страницу. Единственный экземпляр этого объекта, созданный самим браузером и представляющий текущую веб-страницу, хранится в переменной document, доступной везде на данной веб-странице.

    Значит, чтобы получить экезмпляр объекта HTMLAudioElement, представляющий наш аудиоролик aud1, нам следует написать такое выражение:

    [code]var oAud1 = document.getElementById(«aud1»);[/code]
    Экземпляр объекта будет присвоен переменной oAud1.

    Теперь мы можем делать с ним всё, что пожелаем. Например, запустить на воспроизведение:

    [code]oAud1.play();[/code]
    3.2.1. Привязка обработчиков к событиям элементов веб-страницы
    Большинство веб-сценариев, присутствующих в коде веб-страниц, суть обработчики различных событий. Они выполняются в ответ на возникновение в элементах веб-страниц и самой веб-странице различных событий: щелчка мышью, ввода текста в поле ввода, окончание загрузки аудиоролика и др.

    Обработчики событий всегда оформляются в виде функций. Их так и называют — функции-обработчики.

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

    Ранее привязать обработчик к событию, возникающему в каком-либо элементе веб-страницы, было проще. Каждый тег HTML поддерживал набор атрибутов, чьи имена совпадали с именами различных событий, которые могли возникать в элементах, создаваемых этим тегом. Так, тег (гиперссылка) поддерживал атрибут ONCLICK, который представлял событие click, возникающее при щелчке на гиперссылке мышью. В качестве значения такого атрибута тега указывалось выражение вызова функции-обработчика. Вот так:

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

    Прежде всего, нам понадобится метод addEventListener, поддерживаемый всеми объектами элементов веб-страниц, которые могут генерировать события. Этот метод поддерживается абзацами, гиперссылками, графическими изображениями, таблицами и их составными частями и, разумеется, аудио- и видеороликами.

    Формат вызова метода addEventListener таков:

    [code]экземпляр объекта.addEventListener(
    имя события,
    имя функции-обработчика или сама функция-обработчик,
    указание на фазу события, в которой оно будет обработано
    );[/code]

    • Экземпляр объекта представляет элемент веб-страницы, к событию которого мы хотим привязать обработчик. Этот экземпляр можно получить вызовом метода getElementById, рассмотренного нами ранее.
    • Имя события записывается в виде строки только маленькими буквами. Так, для привязки обработчика к событию click, нам следует указать строку «click».
    • Указание на фазу события представляет собой логическую величину: true или false. Здесь нужны более подробные пояснения.

    Каждое событие в браузере, поддерживающем HTML 5, во время своей «жизни» проходит две фазы. Рассмотрим их по очереди.

    Первая фаза — фаза захвата (capturing). Событие возникает в теле самой веб-страницы, потом — последовательно во всех элементах, являющихся родителями того, в котором это событие изначально произошло (источника), и, наконец, в самом элементе — источнике события.

    Рассмотрим такой HTML-код:

    • в теле веб-страницы (тег );
    • в блочном контейнере (тег

    );

  • в гиперссылке — источнике события (тег ).
  • Вторая фаза — фаза всплытия (bubbling). Событие снова возникает в родителе элемента — источника события, потом — в его родителе и т. д., пока не достигнет тела веб-страницы и не перестанет существовать. Можно сказать, что фаза всплытия обратна фазе захвата.

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

    • абзац;
    • блочный контейнер;
    • тело Web-страницы.

    Фаза, в которой событие должно быть обработано, указывается в вызове метода addEventListener третьим параметром — это мы уже знаем. Логическое значение true обозначает фазу захвата, а значение false — фазу всплытия.

    Вообще, если мы обрабатываем события прямо в их источнике (а так чаще всего и делают), не имеет значения, какую фазу события мы укажем в вызове метода addEventListener. Автор в этом случае предпочитает фазу всплытия (значение false третьего параметра).

    Рассмотрим пару примеров привязки обработчиков к событиям.

    3.2.2. Где расположить код обработчиков событий и код, выполняющий их привязку
    Последний важный вопрос, который мы здесь рассмотрим, — где следует расположить код, объявляющий функции-обработчики, и код, собственно выполняющий их привязку.

    Если в качестве обработчиков событий мы использует обычные функции с именами (именованные функции), то объявляющий их код следует поместить в секцию заголовка веб-страницы (тег ). В таком случае браузер обработает код, объявляющий функции-обработчики, сразу же после начала загрузки веб-страницы, и к моменту окончания её загрузки эти функции будут полностью готовы.

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

    Вот два примера, иллюстрирующие сказанное:

    [/code]
    Часто код, выполняющий привязку обработчиков к событиям, располагают вообще в самом конце кода веб-страницы — после закрывающего тега . Так тоже можно делать, но, на взгляд автора, подобный код, вынесенный за пределы веб-страницы, выглядит несколько непривычно.

    3.2.3. Пример обработки событий, возникающих в видеоролике
    Напоследок для закрепления полученных знаний рассмотрим HTML-код веб-страницы с видеороликом. При наведении курсора мыши на этот видеоролик его воспроизведение начинается, а при уводе — приостанавливается.

    [/code]
    Событие mouseover возникает при наведении курсора мыши на элемент веб-страницы, а событие mouseout — при его уводе прочь. Метод pause приостанавливает воспроизведение ролика, а метод play запускает его вновь.

    3.3. Средства для программного управления аудио- и видеороликами HTML 5
    Теперь рассмотрим самые интересные и полезные свойства, методы и события объектов HTMLAudioElement (аудиоролик) и HTMLVideoElement (видеоролик).

    Примечание:
    Здесь мы рассмотрим только свойства, методы и события, являющиеся специфическими для объектов HTMLAudioElement и HTMLVideoElement. Кроме них, данные объекты поддерживают также и все свойства, методы и события, унаследованные от объекта HTMLElement, от которого они «происходят».

    3.3.1. Свойства аудио- и видеороликов
    Объекты HTMLAudioElement и HTMLVideoElement поддерживают примерно одинаковый набор свойств. При этом объект HTMLVideoElement поддерживает те же свойства, что и HTMLAudioElement, плюс добавляет некоторые специфичные именно для него свойства.

    Начнём с рассмотрения свойств объекта HTMLAudioElement.

    • autoplay. Значение true указывает веб-браузеру начать воспроизведение ролика сразу после загрузки веб-страницы, значение false — не делать этого. Соответствует атрибуту AUTOPLAY.
    • controls. Значение true указывает веб-браузеру вывести на веб-страницу элементы управления воспроизведением ролика, значение false — не выводить их. Соответствует атрибуту CONTROLS.
    • currentTime — задаёт или возвращает текущую позицию воспроизведения ролики в виде числа с плавающей точкой в секундах.
    • defaultPlaybackRate — задаёт или возвращает скорость обычного воспроизведения ролика, если посетитель не выполняет быструю прокрутку вперёд или назад. Значение задаётся в виде числа с плавающей точкой и представляет собой множитель, на который умножается оригинальная скорость воспроизведения ролика, хранящаяся в мультимедийном файле. Так, если задать для этого свойства значение 2, ролик будет воспроизводиться с удвоенной скоростью.
    • duration — возвращает продолжительность ролика в виде числа с плавающей точкой в секундах. Если продолжительность ролика почему-то не удаётся получить, возвращается значение NaN. Для потоковых медиаресурсов возвращается значение Infinity. Доступно только для чтения.
    • ended — возвращает false, если воспроизведение ролики ещё продолжается, и true, если оно уже закончилось. Доступно только для чтения.
    • loop. Значение true указывает, чтобы после завершения воспроизведения ролика веб-браузер запустил его снова («зациклил»), а значение false — чтобы он не делал этого. Соответствует атрибуту LOOP.
    • muted. Значение true указывает, чтобы веб-браузер отключил звук, а значение false — чтобы он не делал этого. Вообще-то, для аудиороликов отключать звук смысла нет, но для видеороликов — есть.
    • paused — возвращает значение true, если воспроизведение ролика приостановлено самим посетителем или веб-сценарием, и false, если оно продолжается. Доступно только для чтения.
    • playbackRate — задаёт или возвращает текущую скорость воспроизведения ролика. Значение задаётся в виде числа с плавающей точкой и представляет собой множитель, на который умножается оригинальная скорость воспроизведения ролики, хранящаяся в мультимедийном файле. Так, если задать для этого свойства значение 2, ролик будет воспроизводиться с удвоенной скоростью.
    • preload. Значение true указывает, чтобы веб-браузер начал загрузку ролика сразу же после окончания загрузки веб-страницы, а значение false — чтобы он не делал этого. Соответствует атрибуту PRELOAD.
    • readyState — возвращает строковое значение, обозначающее текущее состояние ролика. Возможных значений этого свойства пять: «uninitialized» — мультимедийный файл ещё не загружен, «loading» — файл загружается, «loaded» — файл полностью загружен, но, возможно, ролик ещё не готов к воспроизведению, «interactive» — посетитель можно запустить воспроизведение ролика, хотя, возможно, файл ещё не загружен полностью, «complete» — файл загружен и ролик готов к воспроизведению. Доступно только для чтения.
    • seeking — возвращает true, если в данный момент посетитель выполняет быструю прокрутку ролика вперёд или назад (изменяет текущую позицию его воспроизведения), и false, если этого не происходит. Доступно только для чтения.
    • src — задаёт или возвращает интернет-адрес файла, где хранится ролик, в виде строки. После задания нового значения этого свойства следует вызвать метод load (см. далее). Соответствует атрибуту SRC.
    • startTime — возвращает самую раннюю позицию ролика, с которой может быть начато его воспроизведение, в виде числа с плавающей точкой в секундах. Доступно только для чтения.
    • volume — задаёт или возвращает текущую громкость в виде значения от 0.0 (звук совсем не слышен) до 1.0 (максимальная громкость; значение по умолчанию).

    Объект HTMLVideoElement поддерживает все эти свойства плюс ещё несколько, которые перечислены ниже.

    • height — задаёт или возвращает высоту ролика, помещённого на веб-страницу, в числовом виде в пикселах. Соответствует атрибуту HEIGHT.
    • poster — задаёт или возвращает интернет-адрес файла с постером в виде строки. Соответствует атрибуту POSTER.
    • videoHeight — возвращает изначальную высоту изображения самого видеоролика, хранящуюся в файле, в виде числа в пикселах. Если получить значение высоты невозможно, возвращается 0. Доступно только для чтения.
    • videoWidth — возвращает изначальную ширину изображения самого видеоролика, хранящуюся в файле, в виде числа в пикселах. Если получить значение ширины невозможно, возвращается 0. Доступно только для чтения.
    • width — задаёт или возвращает ширину ролика, помещённого на веб-страницу, в числовом виде в пикселах. Соответствует атрибуту WIDTH.

    3.3.2. Методы аудио- и видеороликов
    Набор методов, поддерживаемых объектами HTMLAudioElement и HTMLVideoElement, полностью одинаков. Этих методов совсем немного.

      canPlayType. В качестве параметра принимает строку с MIME-типом и возвращает строковое же значение, показывающее, может ли Web-обозреватель обработать мультимедийный файл этого типа. Если файл этого MIME-типа, скорее всего, будет обработан нормально, возвращается значение «probably», если вероятность его правильной обработки меньше, возвращается «maybe», если же такой файл гарантированно не будет обработан, возвращается пустая строка («»).

    [code]if (v ) <
    var s = «Видеоролик MP4 будет обработан»;
    >


    if (v ) <
    var s = «А видеоролик OGG — гарантированно нет»;
    >[/code]

  • load — загружает файл с роликом, интернет-адрес которого был присвоен свойству src; при этом загруженный в данный момент ролик будет выгружен. После загрузки ролика его можно запустить на воспроизведение вызовом метода play. Не принимает параметров.
  • pause — приостанавливает воспроизведение ролика. Не принимает параметров.
  • play — начинает или возобновляет, если оно было приостановлено, воспроизведение ролика. Не принимает параметров.
  • 3.3.3. События аудио- и видеороликов

    Набор событий, поддерживаемых объектами HTMLAudioElement и HTMLVideoElement, также идентичен:

    • abort — возникает, когда посетитель прерывает загрузку мультимедийного файла с роликом.
    • canplay — возникает, когда объём загруженных мультимедийных данных становится достаточным для того, чтобы успешно начать воспроизведение ролика. Возникает после события loadeddata и перед событием canplaythrough.
    • canplaythrough — возникает, когда мультимедийные данные начинают загружаться со скоростью, достаточной для воспроизведения ролика без приостановок на их подгрузку. Возникает после события canplay и перед первым событием progress.
    • durationchange — возникает после того, как веб-браузер получит значение продолжительности загружаемого ролика. Возникает после события loadstart и перед событием loadedmetadata.
    • emptied — возникает после вызова метода load, когда загруженный в данный момент ролик уже выгружен, а новый ролик, чей интернет-адрес был присвоен свойству src, ещё не загружен.
    • ended — возникает после завершения воспроизведения ролика.
    • error — возникает при сбое в процессе загрузки ролика.
    • load — возникает после завершения загрузки ролика.
    • loadeddata — возникает, когда объём загруженных мультимедийных данных становится достаточным для того, чтобы, по крайней мере, запустить воспроизведение ролика; однако это ещё не гарантирует того, что ролик начнёт воспроизводиться без приостановок на подгрузку данных. Возникает после события loadedmetadata и перед событием canplay.
    • loadedmetadata — возникает после того, как веб-браузер получит значения продолжительности ролика и ширины и высоты его изображения. Возникает после события durationchange.
    • loadstart — возникает в самом начале процесса загрузки ролика. Это событие возникает самым первым.
    • pause — возникает при приостановке воспроизведения ролика либо посетителем, либо вызовом метода pause.
    • play — возникает после вызова метода play.
    • playing — возникает сразу после начала воспроизведения ролика. Воспроизведение может быть запущено либо самим посетителем, либо вызовом метода play.
    • progress — периодически возникает в процессе загрузки ролика.
    • ratechange — возникает при изменении значения свойства playbackRate (см. выше).
    • readystatechange — возникает при изменении значения свойства readyState (см. выше).
    • seeked — возникает после того, как посетитель переместит регулятор текущей позиции воспроизведения ролика в новое положение.
    • seeking — возникает, когда посетитель перемещает регулятор текущей позиции воспроизведения ролика.
    • stalled — возникает через три секунды после остановки процесса подгрузки очередной порции данных из мультимедийного файла.
    • timeupdate — возникает в процессе воспроизведения ролики, когда текущая позиция его воспроизведения изменяется.
    • volumechanged — возникает при изменении уровня громкости, а также отключении и включении звука.
    • waiting — возникает, когда воспроизведение ролика приостанавливается для подгрузки очередной порции данных из мультимедийного файла.

    3.3.4. Событие progress и объект события ProgressEvent
    Любое событие веб-браузер, поддерживающий HTML 5, представляет в виде экземпляра объекта Event или производного от него объекта. Этот экземпляр передаётся в функцию-обработчик единственным параметром; мы должны явно указать этот параметр при объявлении данной функции.

    [code]function eventHandler(evt) <
    . . .
    >[/code]
    Здесь мы объявили функцию eventHandler, которая станет обработчиком некого события. В списке параметров этой функции мы указали параметр evt — с ним и будет передан экземпляр объекта Event.

    [code]oA1.addEventListener(«click»,
    function (evt)
    <
    . . .
    >, false);[/code]
    А здесь мы указали этот параметр в объявлении анонимной функции-обработчика, указанном прямо в вызове метода addEventListener.

    Впрочем, если мы не собираемся никак использовать в теле функции-обработчика сведения о событии, хранящиеся в данном экземпляре объекта Event, мы можем и не указывать соответствующий параметр в объявлении этой функции.

    [code]function eventHandler() <
    . . .
    >[/code]

    [code]oA1.addEventListener(«click»,
    function ()
    <
    . . .
    >, false);[/code]
    Объект Event поддерживает несколько свойств, с помощью которых мы можем получить различные сведения о возникшем событии. Также он поддерживает несколько методов, вызывая которые, мы можем каким-то образом повлиять на событие. Объекты событий, производные от Event, добавляют к ним свои свойства и, возможно, методы.

    Событие progress представляется в виде экземпляра объекта ProgressEvent. Этот объект является производным от объекта Event.

    Примечание:
    Насколько удалось выяснить автору, Internet Explorer 9 beta не поддерживает объект ProgressEvent. В функцию-обработчик события progress передаётся экземпляр объекта Event. Однако в будущих редакциях Internet Explorer 9 этот объект должен поддерживаться.

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

    • lengthComputable — возвращает true, если веб-браузер может определить размер загружаемого мультимедийного файла, и false в противном случае.
    • loaded — возвращает размер полученных данных файла в виде целого числа в байтах.
    • total — возвращает размер загружаемого файла в виде целого числа в байтах. Если размер файла не удаётся определить (свойство lengthComputable вернуло false), значение этого свойства не имеет смысла.

    3.4. Примеры веб-страниц с аудио- и видеороликами, управляемыми через веб-сценарии
    Осталось только привести несколько примеров веб-страниц с аудио- и видеороликами, которые управляются через веб-сценарии.

    3.4.1. Установка размеров видеоролика на веб-странице
    Ниже приведён HTML-код веб-страницы с видеороликом. Специальный веб-сценарий устанавливает ширину и высоту панели, в которой воспроизводится ролик на веб-странице, вдвое большими, чем размеры изображения этого ролика.

    [/code]
    Здесь мы указали в теге атрибут AUTOPLAY, чтобы ролик сразу же начал воспроизводиться. Так будет проще оценить его новые размеры, установленные нашим веб-сценарием.

    Мы привязываем обработчик к событию loadedmetadata, возникающему, как мы помним, сразу после того, как веб-браузер получит размеры изображения ролика и его продолжительность. Этот обработчик получает через свойства videoHeight и videoWidth размеры изображения ролика — высоту и ширину, — умножает каждый из этих размеров на два и присваивает свойствам ролика height и width соответственно. В результате ролик будет выведен на веб-страницу увеличенным вчетверо.

    3.4.2. Программное управление аудиороликом
    Здесь мы рассмотрим HTML-код веб-страницы с аудиороликом, управление которым осуществляется с помощью набора кнопок и веб-сценариев, выполняющихся при нажатии на них. Фактически мы реализуем ту же самую функциональность, что присутствует в самом веб-браузере (элементы управления воспроизведением, выводящиеся на экран, если тег или содержит атрибут CONTROLS), но, так сказать, своими силами. Код выглядит следующим образом:

    Сначала мы создаём на веб-странице аудиоролик без элементов управления. И указываем при этом, чтобы он не начинал воспроизводиться после окончания загрузки веб-страницы.

    Далее мы создаём веб-форму с четырьмя обычными кнопками: запуска воспроизведения, его приостановки, увеличения и уменьшения громкости на 0.1. Все эти кнопки мы изначально делаем недоступными; они станут доступны только после загрузки ролика.

    К событию canplaythrough аудиоролика, возникающему, когда мультимедийные данные начинают загружаться со скоростью, достаточной для воспроизведения ролика без приостановок на их подгрузку, мы привязываем обработчик. Он сделает кнопки запуска воспроизведения и увеличения и уменьшения громкости доступными. Отметим, что кнопку приостановки воспроизведения он оставляет недоступной, так как нельзя приостановить воспроизведение ролика, который ещё не начал воспроизводиться. Напоследок он установит значение громкости равным 0.5 — так нам будет комфортнее слушать ролик.

    К событию click (щелчок мышью) кнопки запуска воспроизведения мы привяжем обработчик, который запустит воспроизведение ролика, сделает кнопку запуска недоступной, а кнопку приостановки — доступной.

    К событию click кнопки приостановки мы привяжем обработчик, который приостановит воспроизведение ролика, сделает кнопку запуска доступной, а кнопку приостановки — недоступной.

    К событию click кнопки увеличения громкости мы привяжем обработчик. Он выполнит следующие действия:

    • Получит текущее значение громкости из свойства volume ролика и увеличит его на 0.1.
    • Проверит, не превышает ли полученное на предыдущем шаге значение величину 1.0, и если превышает, сделает его равным 1.0. Многие программы, и веб-браузеры в том числе, выполняют операции над числами с плавающей точкой Internet Explorer не очень точно. В результате мы можем получить значение, чуть-чуть, на какие-то миллионные доли, превышающее 1.0. Однако если присвоить его свойству volume ролика, это приведёт к ошибке в веб-сценарии. Поэтому нам придётся выполнить описанную выше проверку.
    • Присвоит новое значение громкости свойству volume ролика.
    • Если новое значение громкости равно 1.0 (то есть максимальному её значению), сделает кнопку увеличения громкости недоступной, чтобы посетитель больше не смог её увеличить (как мы уже знаем, это чревато ошибкой в выполнении Web-сценария).
    • Сделает кнопку уменьшения громкости доступной, если она ранее была недоступна.

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

    • Получает текущее значение громкости из свойства volume ролика и уменьшает его на 0.1.
    • Проверяет, не меньше ли полученное на предыдущем шаге значение величины 0.0, и если оно окажется меньше, делает его равным 0.0. По только что описанной причине мы можем получить значение, чуть меньшее 0.0, которое, если присвоить его свойству volume ролика, приведёт к ошибке.
    • Присваивает новое значение громкости свойству volume ролика.
    • Если новое значение громкости равно 0.0 (минимальному её значению), делает кнопку уменьшения громкости недоступной, чтобы посетитель больше не смог её уменьшить.
    • Делает кнопку увеличения громкости доступной, если она ранее была недоступна.

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

    Видеоролик












    Продолжительность ролика, с.
    Ширина изображения, пикселов
    Высота изображения, пикселов

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

    различные сведения о ролике.

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

    4. Дополнительные источники

    Как вставить видео в HTML-документ? HTML-теги object и param.

    Верстка любой сложности из PSD макетов

    Доброго времени суток. Меня зовут Михаил.

    Специализируюсь на создании сайтов и их настройке. Разрабатываю современные сайты, учитывая каждое пожелание заказчика уже более 7 лет. Завершены сотни проектов.

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

    В прошлом видео уроке мы познакомились с тегами

    Обратите внимание, что сам путь к файлу и версия скрипта могут отличаться.

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

    Обратите внимание, что путь к файлу и имя могут отличаться!

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

    Освоение 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 невозможно.

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

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

    Как встроить видео на страницу при помощи HTML5, тег v > Создано: 23.07.18 Обновлено: 23.07.18 Категория: HTML

    Сделать проигрывание видео на сайте – сегодня потребность в реализации такого функционала встречается довольно часто. Раньше для этого использовался тег object и сторонние средства, различные плагины, чаще всего популярный flash-плеер. Но с развитием веб-технологий все упростилось, теперь для проигрывания видео на сайте достаточно применить один тег – video.

    Посмотрим ниже, как использовать новый тег video. Также не стоит забывать, что можно применять CSS-стили для придания уникального внешнего вида плееру. Базовый код для размещения плеера такой:

    Что касается атрибутов, то здесь часть из них работает также как в теге audio. Атрибут controls сообщает браузеру, что нужно показать кнопки управления плеером, src – указывает путь к файлу. Для разных браузеров следует задать разные форматы видео, так как поддержка видеокодеков у них различается. Делается это при помощи вложенного тега source. А так как некоторые браузеры все еще могут не поддерживать новый тег, то лучше применить универсальное решение, в котором будет использован тег object для старых браузеров:

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

    • AddType video/webm .webm
    • AddType video/mp4 .mp4
    • AddType video/ogg .ogv

    Какие видео кодеки и форматы поддерживаются браузерами? Посмотрим ниже:

    • WebM/VP8 — поддерживается в Chrome, Firefox4, Opera;
    • MP4 – поддерживается в Windows Phone 7, Safari, IE9, iPhone, iPad, Android;
    • Ogg/Vorbis — поддерживается в старых версиях браузеров Firefox и Opera.

    Какие есть атрибуты у тега video? Перечислим ниже:

    • autoplay — авто воспроизведение видео после загрузки страницы;
    • controls — показать элементы управления;
    • height — высота плеера в px или %;
    • loop — циклическое воспроизведение файла;
    • muted — выключение звука при воспроизведении файла;
    • poster — путь к картинке, которая будет показана во время загрузки видео или пока не начать показ видео. Не обязательно, если не задано, то будет показан первый кадр видео;
    • preload — предварительная загрузка видео. Возможные значения: auto, metadata, none;
    • src — путь к файлу с видеоконтентом;
    • width — ширина плеера в px или %.

    Внутрь тега video можно вставить тег track для задания различной информации о видеофайле. Использование атрибутов тега track похоже на использование атрибутов при применении этого тега внутри тега audio.

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

    Таким образом, разместить видео на страницу стало совсем просто. Благодаря новому тегу HTML5 стало возможным делать видеоплееры высоко функциональными, удобными и в то же время простыми.

    Топ-пост этого месяца:  Рейтинг стран с самым дешевым мобильным интернетом
    Добавить комментарий