Интернет, компьютеры, софт и прочий Hi-Tech

Подписаться через RSS2Email.ru

Публикация аудио и видео средствами HTML5 — это просто

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

Суть и форматы

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

Некоторые браузеры воспринимают mp3 и mp4, некоторые — пока лишь mp3, другие — только свободные форматы. Соответственно, наиболее беспроигрышный вариант — использовать именно свободные. Для видео — WebM, для аудио — Ogg Vorbis.

Значит, придётся предварительно перекодировать мультимедиа в *.webm и *.ogg. Но усилия того стоят.

Ремарка по поводу эргономики. Страницы, предназначенные для просмотра чего-либо онлайн, лучше изготавливать с тёмно-серым фоном. Примерно как на «Яндекс.Видео».

Видео

Предположим, в наличии имеется видеофайл film.webm, который следует разместить на сайте. Заливаем его на сервер и вставляем в HTML-код страницы (в нужном месте, разумеется) вот такой фрагмент:

<video src="http://некий-адрес/film.webm" controls></video>

Адрес в атрибуте src может быть как абсолютным, так и относительным. Если положить файл в одну папку с веб-страницей, достаточно указать src="film.webm".

Атрибут controls обязателен. Это обычные элементы управления (полоса прокрутки, регулировка уровня громкости, разворачивание на весь экран). Они появляются при наведении указателя и, конечно же, нужны для обеспечения комфорта.

Публикация видео средствами HTML5

Можно выложить сразу несколько файлов с роликом в разных форматах — для разных платформ. «Яблочные» устройства, вероятно, предпочтут *.mp4, а браузер Firefox в GNU/Linux выберет *.webm. Какому софту что больше по вкусу, в общем. Такой выбор предоставляется посредством тэга <source>. Для простоты покажем относительные ссылки:

<video controls> 
 <source src="film.mp4"> 
 <source src="film.webm"> 
</video>

Нередко бывает полезно назначить размер прямоугольной области с видео. Это делается с помощью привычных средств HTML, например соблюдая пропорцию 16:9, уменьшим вот так: width="426" height="240" (да, те же атрибуты, что и в тэге img).

Чтобы при открытии страницы файл гарантированно не начал загружаться в кэш браузера в фоновом режиме, атрибут preload используется с таким параметром: preload="none".

Нужно ли указывать MIME-типы публикуемых файлов, вставлять в тэг атрибуты вроде type="video/mp4" или type="video/ogg"? Firefox без этого описания прекрасно обходится и никак не реагирует на его наличие или отсутствие. Opera и Midori — тоже.

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

Аудио

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

<audio src="http://некий-адрес/song.ogg" controls></audio>

Публикация аудио средствами HTML5

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

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

Коротко говоря, атрибуты autoplay (тот самый автозапуск) и loop (зацикливание воспроизведения) работают как для аудио, так и для видео.

<audio src="song.ogg" controls autoplay loop></audio>

Предоставление браузеру возможности выбора формата реализуется так же, как и для видео:

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

Firefox уже умеет воспроизводить *.mp3. Касаемо других браузеров, экспериментируем следующим способом: прикручиваем к странице не одну и ту же композицию в разных форматах, а выбираем для каждого иную — и потом слушаем, которая из них заиграла. (Но тратить время на опыты имеет смысл лишь ради интереса. Проще выложить Ogg Vorbis плюс mp3 для посещений с iPhone.)

Если допущена ошибка в имени файла или пути к нему, Firefox вообще никакого аудиоплеера не отобразит. А в случае с видео браузер выдаст сообщение, мол, MIME-тип не тот. Так что будьте внимательны, ведь на самом деле формат может быть приемлемым.

сообщение, мол, MIME-тип не тот

Adobe Flash как альтернатива

Если браузер у посетителя сайта совсем уж отсталый и не понимает HTML5 как следует, но в системе имеется плагин Adobe Flash, тогда можно предоставить альтернативу, например, FlowPlayer или что-то подобное. В этом случае тэг <object> помещается перед закрывающим </video> или </audio>.

Схема такова:

<video … > … <object … > … </object></video>

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

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

Заключение

Как видите, всё действительно просто. Причём, нет особой нужды прикручивать к сайту красиво (или не очень) оформленные HTML-плееры, написанные на JavaScript, вроде свободных jPlayer и Video.js. Вообще никакой дополнительный софт не требуется, разве что пара программ для конвертирования в Ogg Vorbis и WebM.

Автор: vanilinkin, специально для xBB.uz, 16.05.2014


Предыдущие публикации:

Биржа долевых инвестиций SIMEX.

Последнее редактирование: 2014-05-16 06:19:36

Метки материала: аудио, видео, html5, софт, публикация видео, html, мультимедиа, веб, audio, язык разметки html, video, разметка, гипертекст

Оставьте, пожалуйста, свой комментарий к публикации

Представиться как     Антибот:
   

Просьба не постить мусор. Если вы хотите потестить xBB, воспользуйтесь кнопкой предварительного просмотра на панели инструментов xBBEditor-а.


© 2007-2017, Дмитрий Скоробогатов.
Разрешается воспроизводить, распространять и/или изменять материалы сайта
в соответствии с условиями GNU Free Documentation License,
версии 1.2 или любой более поздней версии, опубликованной FSF,
если только иное не указано в самих материалах.