Встраивание звука, видео, навигационных карт.

24.10.2022 14:21

Музыка в HTML

    HTML5-аудио предоставляет улучшенные возможности работы с аудио контентом. До недавнего времени единственным способом добавления звуковых файлов на веб-страницы было интегрирование фонового звука с помощью тега <bgsound>, который проигрывался во время просмотра пользователем страницы без возможности выключения.

    Благодаря добавлению в спецификацию HTML5 нового элемента <audio>, появилась возможность добавлять аудио содержимое со встроенным программным интерфейсом без привлечения подключаемых модулей.

 

Элемент <audio>

HTML5-элемент <audio> используется для внедрения звукового контента в веб-страницы. В общем виде HTML-разметка имеет следующий вид:

 

    <audio src="name.ogg" controls></audio>

 

В настоящий момент не существует аудио формата, который бы работал во всех браузерах, поэтому для обеспечения доступности контента максимально широкой аудитории рекомендуется включать несколько источников звука, представленных с использованием атрибута src элемента <source>. Одновременно можно добавить резервный контент для браузеров, которые не поддерживают элемент <audio>.
 
<audio controls>
  <source src="name.ogg" type="audio/ogg">
  <source src="name.mp3" type="audio/mpeg">
  <a href="sounds/name.mp3">Скачать name.mp3</a>
</audio>
 

АТРИБУТЫ ТЕГА <AUDIO>

    autoplay - Автоматическое воспроизведение аудио файла сразу же после загрузки страницы.

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

    loop - Циклическое воспроизведение аудио файла.

    muted - Выключает звук при воспроизведении аудио файла.

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

Возможные значения:

auto — браузер загружает аудио файл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение.

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

none — отсутствие автоматической загрузки аудио файла.

src - Содержит абсолютный или относительный URL-адрес аудио файла.

 

Аудио кодеки

Аудио кодек (декодер) представляет собой программу для преобразования цифровых данных в формат звукового файла или звукового потока. Популярными аудио форматами являются следующие:

MP3 — самый популярный аудио формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз. В силу лицензионных отчислений не поддерживается Firefox и Opera.

AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по сравнению с последним, поддерживает более высокое качество звука при сходном размере файла.

Ogg Vorbis — бесплатный формат с открытым кодом, поддерживается в Firefox, Opera и Chrome. Обеспечивает хорошее качество звука, но недостаточно широко поддерживается аппаратными проигрывателями.

 

Альтернативные медиа-ресурсы

Элемент <source> используется для добавления нескольких медиа-ресурсов для <audio> и <video>. Указывает на альтернативные видео/аудио файлы, которые браузер может выбрать из предложенных на основании поддерживаемого им типа носителя или кодека.

 

АТРИБУТЫ ТЕГА <SOURCE>

    media - Определяет тип медиа-устройства (т.е. для каких устройств оптимизирован файл).

    src - Содержит абсолютный или относительный URL-адрес медиафайла.

    type -  Определяет MIME-тип медиафайла.

 

Пример простого аудио плеера:

    Вместо файла example.mp3 можно скачать любой аудиофайл из сети.

 

<HTML>
    <HEAD>
    <TITLE>Пример использования звуковых файлов</TITLE>
    </HEAD>
        <BODY>
        <audio controls>
          <source src="example.mp3" type="audio/mpeg">
          <a href="example.mp3">Скачать example.mp3</a>
        </audio>
</BODY>
</HTML>
 
 

 

Видео в HTML

    Раньше, если вы хотели добавить видео на веб-страницу, вам приходилось использовать элемент <object>, представляющий собой универсальный контейнер для внешних объектов. Подобные приложения были в малой степени интерактивными и слабо взаимодействовали с окружающими их элементами на веб-странице.

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

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

 

Элемент <video>

    В простом варианте HTML-разметка для размещения видеофайла на странице имеет следующий вид:

 
    <video src="video.ogv" controls></video> 
 
 

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

    Как и в случае с аудиофайлами, рекомендуется перечислять в <source> все форматы, начиная с более предпочтительного. Также нужно указывать MIME-тип для каждого видеофайла.

 
<video controls width="400" height="300">
  <source src="video.mp4" type="video/mp4"><!-- MP4 для Safari, IE9, iPhone, iPad, Android, и Windows Phone 7 -->
  <source src="video.webm" type="video/webm"><!-- WebM/VP8 для Firefox4, Opera, и Chrome -->
  <source src="video.ogv" type="video/ogg"><!-- Ogg/Vorbis для старых версий браузеров Firefox и Opera -->
  <object data="video.swf" type="application/x-shockwave-flash"><!-- добавляем видеоконтент для устаревших браузеров, в которых нет поддержки элемента video -->
    <param name="movie" value="video.swf">
  </object>
</video>
 

АТРИБУТЫ ТЕГА <VIDEO>

    autoplay - Автоматическое воспроизведение видеоофайла сразу же после загрузки страницы.

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

    height - Задает высоту окна для отображения видеоданных, возможные значения: px или %

    loop - Циклическое воспроизведение видеофайла.

    muted - Выключает звук при воспроизведении видеофайла.

    poster - URL файла изображения, которое будет отображаться во время загрузки видеофайла или до тех пор, пока пользователь не нажмет на кнопку PLAY. Если атрибут не задан, то будет отображаться первый кадр видеофайла.

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

Возможные значения:

auto — браузер загружает видеофайл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение.

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

none — отсутствие автоматической загрузки видеофайла.

src - Содержит абсолютный или относительный URL-адрес видеофайла.

width - Задает ширину окна для отображения видеоданных, возможные значения: px или %.

 

Встраиваемый интерактивный контент

Элемент <embed> 

    Он определяет контейнер для внешнего приложения или интерактивного содержимого (другими словами, плагина). Большинство браузеров поддерживало данный элемент на протяжении долгого времени. Тем не менее, данный тег не был включен в спецификацию HTML4, его добавили в спецификацию HTML5. С помощью <embed> на веб-страницы можно добавлять не только видеофайлы, но и векторные изображения в формате swf:

 

    <embed src="movie.mov" type="video/quicktime" width="640" height="480">

    <embed src="helloworld.swf">

 

АТРИБУТЫ ТЕГА <EMBED>

    height - Определяет высоту встраиваемого контента в px или %.

    src - Содержит абсолютный или относительный URL-адрес медиафайла.

    type - Определяет MIME-тип встраиваемого файла.

    width - Определяет ширину встраиваемого контента в px или %.

 

Видеокодеки

    При просмотре видео проигрыватель должен его декодировать. Одни проигрыватели используют программное декодирование видеопотока, другие используют аппаратное декодирование.

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

    H.264 — высококачественный кодек от фирмы MPEG, делится на профили для поддержки как устройств с минимальными возможностями, так и устройств высокого разрешения.

    Ogg Theora — открытый бесплатный стандарт для видео, качество и производительность несколько ниже стандарта H.264.

    VP8 — открытый бесплатный кодек, сходный по качеству с H.264. Поддерживается в Firefox, Chrome и Opera.

    Любой видеофайл является файловым контейнером, в котором хранятся другие файлы. Аудио- и видеодорожки объединяются для воспроизведения видеоролика. Метаданные содержат информацию о данном видеоролике — изображение обложки, субтитры и пр. К популярным форматам видеоконтейнеров относятся следующие:

 
Ogg (.ogv, .oga, .ogx, .ogg) — формат-контейнер с открытым исходным кодом для видеокодека Theora и аудио Vorbis. Работает в Firefox, Chrome и Opera.
MIME-тип: video/ogg.
 
MPEG 4 (.mp4) — формат-контейнер для видеокодека H.264 и аудиокодека AAC. Работает в Safari и Chrome. Кодирует видео, в том числе высокой четкости, для полного спектра устройств, таких как iPhone, iPod и iPad.
MIME-тип: video/mp4.
 
WebM (.webm) — формат-контейнер с открытым исходным кодом для видеокодека VP8 от Google и аудиокодека Ogg Vorbis. Работает в Firefox, Chrome, Opera и Adobe Flash Player.
MIME-тип: video/webm.
 
Audio Video Interleave (.avi) — формат предназначен для записи звука и движущихся изображений, соответствует спецификации RIFF.
MIME-тип: video/vnd.avi, video/avi, video/msvideo, video/x-msvideo.
 
Matroska (.mkv) — популярный видеоконтейнер, может содержать видео в формате H.264, VP8 или Theora.
 

Альтернативные медиа-ресурсы

Элемент <source> 

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

 

АТРИБУТЫ ТЕГА <SOURCE>

    media - Определяет тип медиа-устройства (т.е. для каких устройств оптимизирован файл).

    src - Содержит абсолютный или относительный URL-адрес медиафайла.

    type - Определяет MIME-тип медиафайла.

 

Навигационные карты в HTML

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

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

 

Клиентский вариант карты-изображения

    Для указания того, что изображение является картой, используется атрибут usemap тега <img>. В качестве значения указывается ссылка на описание конфигурации карты.

 

 

    Чтобы сделать ссылки на закладки, показанные на рисунке (его же можно использовать в качестве файла map.gif), следует использовать следующий код:

 
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Карта-изображение</title>
 </head>
 <body> 
  <p><img src="map.gif" width="411" height="46" usemap="#map" alt="Навигация"></p>
  <p><map name="map"> <area shape="poly" alt="Закладка 2" 
    coords="210,27, 203,9, 202,6, 197,2, 192,1, 120,1, 115,2, 110,6, 112,9, 119,27, 119,32, 211,32, 210,27" 
    href="2.html">
    <area shape="poly" alt="Закладка 3" 
    coords="302,27, 295,9, 293,6, 289,2, 283,1, 212,1, 206,2, 202,6, 203,9, 210,27, 211,32, 284,32, 303,32, 302,27" href="3.html">
    <area shape="poly" alt="Закладка 4" 
    coords="302,27, 303,32, 394,32, 393,27, 386,9, 382,3, 375,1, 303,1, 298,2, 293,6, 295,9, 302,27" 
    href="4.html">
  </map></p>
 </body>
</html>
 
    Попробуйте написать код. При наведении на область полигона должна отображаться ссылка на указанную WEB-страницу (напр. 2.html и т.д.). 

    Для указания браузеру, что изображение является картой, применяется атрибут usemap. Он является ссылкой на описание конфигурации карты, которая задается тегом <map>. Значение атрибута name данного тега должно соответствовать имени в usemap. Для задания активой области, являющейся ссылкой на HTML-документ, используется тег <area>.

 

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

    shape - Определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly).

    alt - Добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится.

    coords - Задает координаты активной области. Координаты отсчитываются в пикселах от левого верхнего угла изображения, которому соответствует значение 0,0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области.

 

    Для окружности задаются три числа — координаты центра круга и радиус.

 

<area shape="circle" coords="230,340, 100" href="circle.html">

 

    Для прямоугольника — координаты левого верхнего и правого нижнего угла.

 

<area shape="rect" coords="24,18, 210,56" href="rect.html">

 

    Для полигона задаются координаты его вершин с координатными точками:

    href - Определяет адрес ссылки для области. Правила записи такие же, как и для тега <a>.

 

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

    С позиции удобства пользователей, карты-изображения имеют только одно преимущество — ссылки разнообразной формы. Это добавляет наглядность в представлении информации — мы не ограничены прямоугольной формой ссылки и можем использовать ссылки сложной конфигурации для своих целей. Во всех остальных отношениях от них проку нет — обычные текстовые ссылки более информативны и им не страшно отключение показа картинок в браузере. Тот факт, что одно изображение загружается быстрее, чем та же картинка, но порезанная на фрагменты и сохраненная в виде набора графических файлов, легко обходится. Каждый из таких конечных файлов можно уменьшить, используя индивидуальные настройки оптимизации. В итоге, общий объем всех фрагментов будет занимать меньше места, чем одно изображение. Не стоит сбрасывать со счетов и психологический фактор — человеку кажется, что набор маленьких картинок загружается быстрее, чем одна большая.

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

Назад