Отображение видео и аудио на интернет-странице

Сегодня, с появлением Youtube и Dailymotion, стало обычным делом просмотр видео на веб-сайтах. Надо сказать, что приход широкополосного вещания помогает распространять видео в Интернете.

Однако, ни один HTML тег до сих пор не позволял управлять видео. Вместо этого необходимо было использовать плагин, наподобие Flash. Он по-прежнему частично используется для просмотра видео на Youtube, Dailymotion, Vimeo и на других сайтах. Но использование плагина имеет много недостатков: нельзя всегда контролировать, как работает плагин, иногда находятся уязвимости в безопасности. В конце концов, это довольно тяжело.

Из-за этого два новых стандартных тега были созданы в HTML5:<video>и <audio>.

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

В теории достаточно простого тега для вставки аудио (рисунок 1):

Рисунок 1. Пример вставки аудио

На практике это немного сложнее.

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

Можно дополнить тег следующими атрибутами:

·       controls: чтобы добавить кнопки “Play”, «Пауза» и полосу прокрутки. Это может показаться необходимым, и можно удивиться, почему его нет в списке по умолчанию, но некоторые сайты предпочитают создавать свои собственные кнопки управления с воспроизведением при помощи JavaScript.

·       width: чтобы изменить ширину воспроизведения аудио.

·       loop: аудио будет зациклено.

·       autoplay: музыка будет проигрываться сразу после загрузки страницы. Необходимо избегать злоупотребления, это обычно раздражает пользователей, которые заходят на сайт.

·       preload: указывает, может ли аудио может быть предварительно загружено до загрузки страницы или нет. Этот атрибут может принимать значения:

·       auto(по умолчанию): браузер сам решает, следует ли предварительно загрузить всё аудио, только метаданные или ничего.

·       metadata: загрузка только метаданных (продолжительность, и т.д.).

·       none: нет предварительной нагрузки. Полезно, если вы не хотите тратить полосы пропускания на вашем сайте.

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

Если добавить атрибут controls, то будет гораздо лучше (рисунок 2).

Рисунок 2. Пример вставки аудио с атрибутом controls

Зачем делать тег парным? Это позволяет отображать сообщение или предложить запасной вариант для браузеров, которые не поддерживают этот новый тег (рисунок 3).

Рисунок 3. Пример вставки аудио с сообщением

Старые браузеры увидят это сообщение, однако это не коснётся новых. Если браузер не поддерживает MP3, то как выйти из ситуации?

В таком случае выходят из этого следующим образом, предлагая несколько вариантов (рисунок 4):

Рисунок 4. Вставка аудио для расширенной поддержки

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

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

Достаточно добавить тег <video> (рисунок 5):

Рисунок 5. Простая вставка видео

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

Нужно добавить несколько атрибутов (большинство из них такие же, как <audio>):

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

·       controls: чтобы добавить кнопки «Play», «Пауза» и полосу прокрутки. Это может показаться необходимым, это может показаться странным, но некоторые сайты предпочитают создавать свои собственные кнопки управления воспроизведением с помощью JavaScript.

·       width: чтобы изменить ширину воспроизведения видео.

·       loop: видео будет зациклено.

·       autoplay: видео будет проигрываться сразу после загрузки страницы. Нужно избегать злоупотребления это обычно раздражает пользователей, которые заходят на сайт

·       preload: указывает, может ли видео быть предварительно загружено до загрузки страницы или нет. Этот атрибут может принимать значение:

·       auto(по умолчанию): браузер сам решает, следует ли предварительно загрузить всю видео, только метаданные или ничего.

·       metadata: загрузка только метаданных (продолжительность, и т.д.).

·       none: нет предварительной нагрузки. Полезно, если вы не хотите тратить полосы пропускания на вашем сайте.

Нельзя заставить браузер загружать видео заранее, он всегда решает это сам.

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

Вот более полный код (рисунок 6):

Рисунок 6. Вставка видео с атрибутами

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

Как добиться поддержки всеми браузерами?

Нужно использовать тег <source>. Браузер выберет формат, который он распознаёт (рисунок 7):

Рисунок 7. Вставка видео для расширенной поддержки

IPhone, IPad и IPod не распознают в настоящее время H.264 (файл.mp4) ... и распознают его только, когда он появляется первым в списке. Поэтому рекомендовано указывать, H.264 первым, чтобы обеспечить максимальную совместимость.

Как отобразить видео в полноэкранном режиме?

В настоящее время это невозможно. На самом деле, существует способ в Firefox, но это неочевидно: необходимо щелкнуть правой кнопкой мыши на видео и выберите «Полный экран».

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

Как защитить видео, т.к. кто-то может его легко скопировать?

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

Flash-видео проигрыватели, используются, чтобы «защитить» содержание видео, но опять же, существуют обходные пути. Многие плагины позволяют скачивать видео, например, с Youtube.