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

- для звука <audio></audio>
- для видео <video></video>

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

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


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

Данные взяты с официального сайта Mozilla

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

Ознакомившись с форматами, перейдем к добавлению аудио на веб-страницу, для этого воспользуемся парным тегом <audio>, его атрибуты:
- SRC – значение атрибута содержит путь к воспроизводимому файлу;
- AUTOPLAY – наличие атрибута позволяет воспроизводить звуковой файл сразу по завершении загрузки страницы;
- AUTOBUFFER – атрибут для автоматической буферизации аудио файла. Этим атрибутом следует воспользоваться, чтобы исключить задержки в воспроизведении звукового файла. Если в теге <audio> уже указан атрибут AUTOPLAY, то в использование атрибута AUTOBUFFER нет необходимости;
- CONTROLS – выводит панель для управления воспроизведением аудио файла;
- LOOP – атрибут зацикливания воспроизведения аудио;
- TYPE – MIME формат аудио файла. Данный атрибут не является обязательным, однако его желательно использовать, чтобы браузер мог мгновенно определить тип воспроизводимого звукового файла;

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

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

<audio src="music.ogg" type="audio/ogg" autoplay></audio>

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

<audio src="music.ogg" type="audio/ogg" autoplay controls></audio>

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

<audio src="music.ogg" type="audio/ogg" autobuffer controls></audio>

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

<audio controls>
  <source src="music.mp3" type="audio/mp3" />
  <source src="music.ogg" type="audio/ogg" />
</audio>

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

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

<audio controls>
  <source src="music.mp3" type="audio/mp3" />
  <source src="music.ogg" type="audio/ogg" />
  Ваш браузер не поддерживает HTML5, обновите его до последней версии.
</audio>

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

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

Чтобы добавить видео на веб-страницу воспользуйтесь парным тегом <video>. Стоит отметить, что все описанное выше для тега <audio>, справедливо и для тега <video>, он имеет те же атрибуты, но плюс к ним добавляются еще несколько новых:
- SRC – значение атрибута содержит путь к воспроизводимому файлу;
- AUTOPLAY – наличие атрибута позволяет автоматически воспроизводить видео файл;
- AUTOBUFFER – атрибут для автоматической буферизации видео файла;
- CONTROLS – выводит панель для управления воспроизведением видео файла;
- TYPE – MIME формат видео файла;
- POSTER – значение атрибута содержит путь к графическому файлу, который будет служить в качестве заставки в панели просмотра видео. Если атрибут не указан, то браузер отобразит первый кадр видео, либо темный экран;
- WIDTH, HEIGHT – атрибут содержит размеры блока в котором отображается видео в “px”;
- LOOP – атрибут зацикливания воспроизведения видео;

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

<video width="300px" controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogg" type="video/ogg" />
  Ваш браузер не поддерживает HTML5, обновите его до последней версии.
</video>

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

Добавлено: 20 Февраля 2015 20:38:26 Добавил: Андрей Ковальчук Нравится 0

Добавить