Мультимедиа в стиле HTML 5: теги AUDIO и VIDEO
32646
Уже совсем скоро 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, который поддерживал данный формат аудио или видео. Для активизации модуля расширения веб-браузера использовался тег <EMBED>, для активизации элемента ActiveX - тег <OBJECT>. В атрибутах этого тега записывались различные параметры: идентификатор нужного элемента ActiveX или MIME-код файла, по которому система выбирала подходящий модуль расширения, ширина и высота и пр. После этого в тег помещался набор тегов <PARAM>, указывающих параметры самого модуля расширения или элемента ActiveX: интернет-адрес файла с аудио или видео, настройки его воспроизведения и др.
В результате получался довольно увесистый и, прямо скажем, невразумительный HTML-код вида:
<OBJECT TYPE="application/x-shockwave-flash" DATA="movie.swf" WIDTH="550" HEIGHT="400">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="wmode" VALUE="opaque">
<PARAM NAME="swfversion" VALUE="6.0.65.0">
<PARAM NAME="expressinstall" VALUE="Scripts/expressInstall.swf">
</OBJECT>
Этот код помещает на веб-страницу проигрыватель 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. Пишем правильный <!DOCTYPE>
Прежде всего, чтобы браузер с поддержкой HTML 5 опознал нашу веб-страницу как написанную с применением HTML 5 и, следовательно, правильно её отобразил, нам придётся специально сообщить ему об этом. Сделать это очень просто.
В самом начале HTML-кода веб-страницы должен быть указан её тип. Для этого используется особый одинарный тег <!DOCTYPE> (которым, кстати, очень часто пренебрегают). Вот такой (сам тег <!DOCTYPE> выделен полужирным шрифтом):
[b]<!DOCTYPE html>[/b]
<HTML>
. . .
</HTML>
Это обязательно! В противном случае мы, скорее всего, не увидим на веб-странице ни аудио-, ни видеороликов.
2.1.2. О кодировке
Из всех кодировок, что применяются веб-дизайнерами для своих творений, HTML 5 рекомендует использовать UTF-8.
Чтобы дать понять браузеру, что мы записали нашу веб-страницу именно в этой кодировке, мы вставим в секцию заголовка этой веб-страницы (тег <HEAD>) вот такой метатег:
. . .
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
. . .
</HEAD>
. . .
Создавать текстовые файлы (а веб-страницы - это и есть текстовые файлы) в кодировке UTF-8 можно в обычном Блокноте. Просто при сохранении файла в раскрывающемся списке Кодировка, находящемся в диалоговом окне сохранения файла, выберем пункт UTF-8. Больше ничего делать не нужно.
2.2. Вставка аудиороликов. Тег <AUDIO>
Для размещения на странице аудиоролика в HTML 5 предусмотрен парный тег <AUDIO>.
<AUDIO SRC="sound.mp3" CONTROLS></AUDIO>
Этот код вставляет в веб-страницу аудиоролик, хранящийся в файле sound.mp3, и выводит на экран элементы управления его воспроизведением.
Рис. 1. Элементы управления воспроизведением аудиоролика в окне Internet Explorer 9
Если мы откроем веб-страницу с таким аудиороликом в Internet Explorer 9, то увидим следующее - см. рис. 1. Здесь присутствует кнопка запуска и приостановки воспроизведения, регулятор, показывающий позицию воспроизведения ролика, текстовые поля, выводящие текущую позицию воспроизведения и продолжительность ролика, и регулятор громкости с кнопкой отключения звука. В общем, всё то, что мы привыкли видеть в обычных приложениях для воспроизведения музыки. И всё это без установки каких бы то ни было дополнительных программ!
Теперь перечислим все интересные для нас атрибуты тега <AUDIO>. Их не очень много.
- AUTOPLAY. Этот атрибут не принимает значения (так называемый атрибут без значения). Если он присутствует в теге <AUDIO>, воспроизведение ролика начинается сразу по окончании загрузки веб-страницы. В противном случае нам придётся запустить воспроизведение либо вручную, с помощью кнопки запуска на веб-странице (см. рис. 1), либо программно, из веб-сценария (подробнее об этом мы поговорим позже).
<AUDIO SRC="sound.mp3" CONTROLS AUTOPLAY></AUDIO> - CONTROLS - также атрибут без значения. Если он присутствует в теге, Internet Explorer выведет на экран набор элементов управления воспроизведением аудиоролика (как показано на рис. 1). В противном случае посетитель не будет иметь возможности приостановить или перемотать ролик. Впрочем, мы можем предоставить ему такую возможность через соответствующие веб-сценарии.
- LOOP - атрибут без значения. Если он присутствует в теге, воспроизведение ролика после окончания начнётся снова (т.е. зациклится).
- PRELOAD - атрибут без значения. Если он присутствует в теге, загрузка файла с аудиороликом начнётся сразу же после окончания загрузки веб-страницы. Это позволит исключить паузу между запуском ролика на воспроизведение и собственно началом его воспроизведения.
- SRC - вероятно, самый главный атрибут. Указывает интернет-адрес мультимедийного файла, хранящего ролик.
Это были атрибуты, специфические для тега <AUDIO>. Разумеется, этот тег поддерживает все глобальные атрибуты HTML: CLASS, ID, STYLE, TITLE и др.
<AUDIO SRC="sound.mp3" ID="aud1" CONTROLS CLASS="audiotape"></AUDIO>
2.3. Вставка видеороликов. Тег <VIDEO>
Для вставки на веб-страницу видеоролика используется очень похожий тег - <VIDEO>. Он тоже парный.
<VIDEO SRC="movie.mp4" AUTOPLAY CONTROLS></VIDEO>
Этот HTML-код вставляет на веб-страницу видеоролик, хранящийся в файле movie.mp4. При этом на экране будут присутствовать элементы управления его воспроизведением, а само воспроизведение начнётся сразу после загрузки веб-страницы.
Рис. 2. Элементы управления воспроизведением видеоролика в окне Internet Explorer 9
Открыв в Internet Explorer 9 веб-страницу с приведённым выше кодом, мы увидим следующее - см. рис. 2. А именно панель, в которой будет воспроизводиться видеоролик. Если навести на эту панель курсор мыши, в её ничжней части появится уже знакомый нам набор элементов для управления воспроизведением ролика. И, опять же, всё это мультимедийное богатство мы получим без установки дополнительных программ.
Осталось только рассмотреть специфические для тега <VIDEO> атрибуты. Прежде всего, тег <VIDEO> поддерживает все атрибуты, знакомые нам по тегу <AUDIO> (см. выше). Это атрибуты AUTOPLAY, CONTROLS, LOOP, PRELOAD и SRC.
- HEIGHT - задаёт высоту панели, в которой будет выводиться видеоролик, в пикселах. Если не указан, эта панель будет иметь такую же высоту, как и высота постера (о нём - чуть позже). Если постер отсутствует, панель будет иметь высоту 150 пикселов.
- POSTER - задаёт интернет-адрес файла с постером, графическим изображением, которое будет выводиться перед началом воспроизведения ролика. Если постер не указан, выводится первый кадр ролика.
<VIDEO SRC="movie.mp4" CONTROLS POSTER="movie_poster.jpg"></VIDEO> - WIDTH - задаёт ширину панели, в которой будет выводиться видеоролик, в пикселах. Если не указан, эта панель будет иметь такую же ширину, как и ширина постера. Если постер отсутствует, панель будет иметь ширину 300 пикселов.
<VIDEO SRC="movie.mp4" CONTROLS HEIGHT="480" WIDTH="640"></VIDEO>
Отметим, что видеоролик в любом случае будет выводиться без искажения пропорций его изображения. Хотя, возможно, по сторонам изображения будут присутствовать чёрные полосы.
Как и тег <AUDIO>, тег <VIDEO> поддерживает все глобальные атрибуты HTML: CLASS, ID, STYLE, TITLE и др.
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.
Apple Safari:
- Формат аудиофайлов: QuickTime (MOV).
- Форматы видеофайлов: QuickTime (MOV) и MPEG 4 (MP4).
- Формат кодирования аудио: AAC.
- Формат кодирования видео: MPEG 4 AVC (H.264).
Примечание:
Ситуация с Chrome ещё до конца не ясна. Недавно корпорация Google заявила, что делает ставку на формат кодирования видео VP8. Все прочие форматы кодирования видео поддерживаться не будут. Подождём, чем всё это закончится.
Мда, ситуация так себе... Разработчики HTML 5 грезили о временах, когда аудио- и видеоролики будут воспроизводиться на всех веб-браузерах, поддерживающих HTML 5, а на деле до этой идиллии ещё очень далеко. Гладко было на бумаге, да забыли про овраги.
Что же делать?
2.5.2. Альтернативные источники. Тег <SOURCE>
Единственный выход из этого положения - указать в теге <AUDIO> или <VIDEO> несколько мультимедийных файлов, содержащих один и тот же ролик, но сохранённых в разных форматах. Каждый браузер, оснащённый поддержкой HTML 5, выберет тот файл, который он сможет воспроизвести.
Этот подход получил название альтернативных источников. Под источниками в данном случае подразумеваются мультимедийные файлы.
Для указания альтернативных источников используется специальный тег <SOURCE>. Это одинарный тег.
- Каждый из альтернативных источников указывается отдельным тегом <SOURCE>.
- Теги <SOURCE> должны присутствовать внутри тегов <AUDIO> и <VIDEO>. Именно поэтому данные теги сделаны парными.
- Если мы указали альтернативные источники, то указывать интернет-адрес мультимедийного файла в самом теге <AUDIO> и <VIDEO> (в его атрибуте SRC) не нужно.
<AUDIO CONTROLS>
<SOURCE SRC="sound.mp3">
<SOURCE SRC="sound.wav">
<SOURCE SRC="sound.aac">
</AUDIO>
Здесь мы указали для тега <AUDIO> три альтернативных источника - три аудиофайла. Отметим, что в самом теге <AUDIO> интернет-адрес аудиофайла не указан (атрибут SRC отсутствует).
Примечание:
Если мы всё-таки укажем интернет-адрес файла в самом теге <AUDIO> или <VIDEO>, то будет загружен именно этот файл. Теги <SOURCE> в этом случае будут проигнорированы.
- Аудиофайл sound.mp3 будет воспроизведён Internet Explorer 9.
- Аудиофайл sound.wav будет воспроизведён Firefox, Opera и Chrome.
- Аудиофайл sound.aac будет воспроизведён Safari.
<VIDEO AUTOPLAY CONTROLS>
<SOURCE SRC="movie.mp4">
<SOURCE SRC="movie.ogg">
</VIDEO>
А здесь мы указали для тега <VIDEO> два альтернативных источника - два видеофайла.
- Видеофайл movie.mp4 будет воспроизведён Internet Explorer 9 и Safari.
- Видеофайл movie.ogg будет воспроизведён Firefox, Opera и Chrome.
Тег <SOURCE> поддерживает два атрибута, которые мы сейчас рассмотрим.
- SRC - указывает интернет-адрес мультимедийного файла-источника. Этот атрибут обязательно должен присутствовать в теге.
- TYPE - указывает MIME-тип файла-источника. Это необязательный атрибут. Если он отсутствует, браузер определит MIME-тип файла по его расширению.
2.5.3. Атрибуты AUTOBUFFER и PRELOAD тегов <AUDIO> и <VIDEO>
Ранее мы рассмотрели атрибут PRELOAD, поддерживаемый тегами <AUDIO> и <VIDEO>. Этот атрибут указывает браузеру начать загрузку аудио- или видеоролика сразу же после окончания загрузки веб-страницы, чтобы при начале воспроизведения ролика не возникла задержка.
Атрибут PRELOAD присутствует в современной версии спецификации HTML 5. Более старые её версии предусматривали атрибут AUTOBUFFER, выполняющий ту же задачу. Однако нкоторые браузеры, в частности, Firefox, всё ещё поддерживают атрибут AUTOBUFFER и не знают о существовании атрибута PRELOAD. Поэтому нам придётся указывать в теге <AUDIO> или <VIDEO> оба этих атрибута:
<VIDEO SRC="movie.mp4" AUTOBUFFER CONTROLS PRELOAD></VIDEO>
2.5.4. А если браузер вообще не поддерживает HTML 5? Альтернативное содержимое.
Наконец, нужно предусмотреть такую ситуацию, когда веб-страница, содержащая аудио- или видеоролик, открывается в веб-браузере, который не подерживает HTML 5 и, соответственно, теги <AUDIO> и <VIDEO>. Нам придётся как-то дать об этом знать посетителю и предложить ему что-то взамен.
Мы уже знаем, что теги <AUDIO> и <VIDEO> - парные. Внутри мы можем указать альтернативные источники для аудио или видео (с помощью тегов <SOURCE>; подробнее об этом говорилось выше). Но мы также можем поместить туда какой-либо текст или иное веб-содержимое, сообщающее посетителю, что его браузер не поддерживает HTML 5 и, следовательно, не может воспроизвести это аудио или видео. Такое веб-содержимое называется альтернативным.
- Браузер с поддержкой HTML 5 проигнорирует альтернативное содержимое.
- Браузер, не поддерживающий HTML5, наоборот, проигнорирует теги <AUDIO>, <VIDEO> и <SOURCE> как не известные ему и выведет на экран альтернативное содержимое.
<VIDEO SRC="movie.mp4" AUTOPLAY CONTROLS>
<P>Извините, но ваш браузер не поддерживает
HTML 5 и, соответственно, не сможет воспроизвести этот
видеоролик.</P>
</VIDEO>
спроизвести этот
видеоролик.</P>
</VIDEO>[/code]
3. Управляем размещенным на веб-странице аудио и видео из веб-сценариев
Современные веб-страницы - это не только HTML и CSS. Это ещё и веб-сценарии, написанные на языке JavaScript. С их помощью мы можем "оживить" наши творения, заставить их реагировать на действия посетителя.
Было бы очень странно, если бы Internet Explorer 9 и другие современные браузеры с поддержкой HTML 5 не позволяли управлять размещенным на веб-странице аудио и видео из веб-сценариев. Разумеется, они позволяют это делать! И мы сейчас рассмотрим, как это делается.
3.1. Некоторые нововведения в веб-программировании в стиле HTML 5
Первое, что нам нужно узнать, - какие нововведения в веб-программировании принёс нам HTML 5 и какие старые приёмы, применявшиеся до этого, перестали работать. Это очень важно, так что читаем внимательно.
3.2 Доступ к элементам веб-страницы из веб-сценариев
Что нам нужно, чтобы получить доступ к какому-либо элементу веб-страницы (абзацу, гиперссылке, кнопку, аудио- или видеоролику наконец) из веб-сценария? Правильно - однозначно идентифицировать его каким-то образом. То есть сделать этот элемент в чём-то уникальным, отличающимся в чём-то от его "соседей" по веб-странице.
Проще всего сделать это, дав элементу имя. Для этого используется глобальный атрибут ID, поддерживаемый всеми тегами. В качестве значения этого атрибута как раз и указывается имя.
Так, следующий HTML-код создаёт на веб-странице аудиоролик и даёт ему имя aud1 (атрибут ID выделен полужирным шрифтом):
[code]<AUDIO ID="aud1" SRC="sound.mp3" CONTROLS></AUDIO>[/code]
Каждый элемент веб-страницы представляется в веб-сценарии как экземпляр какого-либо объекта. Так, аудиоролик (тег <AUDIO>) есть экземпляр объекта HTMLAudioElement, а видеоролик (тег <VIDEO>) - экземпляр объекта HTMLVideoElement.
Перед тем как программно манипулировать нужным нам аудио- или видеороликом, нам следует получить представляющий его экземпляр соответствующего объекта.
Ранее для каждого именованного элемента веб-страницы сам браузер создавал переменную, в которой и хранился этот экземпляр. Имя этой переменной совпадало с именем элемента, тем самым, что мы указали в атрибуте 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 поддерживал набор атрибутов, чьи имена совпадали с именами различных событий, которые могли возникать в элементах, создаваемых этим тегом. Так, тег <A> (гиперссылка) поддерживал атрибут ONCLICK, который представлял событие click, возникающее при щелчке на гиперссылке мышью. В качестве значения такого атрибута тега указывалось выражение вызова функции-обработчика. Вот так:
[code]<SCRIPT>
function clickHandler()
{
. . .
}
</SCRIPT>
. . .
<A HREF="..." ONCLICK="clickHandler();">[/code]
Здесь мы привязали к событию click гиперссылки функцию-обработчик clickHandler. Отметим, что в качестве значения атрибута ONCLICK, соответствующего этому событию, мы указали выражение, вызывающее нашу функцию-обработчик.
Такой способ привязки обработчиков к событиям поддерживается и в HTML 5, но не рекомендуется к использованию. Вместо него должен применяться иной способ, который мы сейчас рассмотрим.
Прежде всего, нам понадобится метод addEventListener, поддерживаемый всеми объектами элементов веб-страниц, которые могут генерировать события. Этот метод поддерживается абзацами, гиперссылками, графическими изображениями, таблицами и их составными частями и, разумеется, аудио- и видеороликами.
Формат вызова метода addEventListener таков:
[code]экземпляр объекта.addEventListener(
имя события,
имя функции-обработчика или сама функция-обработчик,
указание на фазу события, в которой оно будет обработано
);[/code]
- Экземпляр объекта представляет элемент веб-страницы, к событию которого мы хотим привязать обработчик. Этот экземпляр можно получить вызовом метода getElementById, рассмотренного нами ранее.
- Имя события записывается в виде строки только маленькими буквами. Так, для привязки обработчика к событию click, нам следует указать строку "click".
- Указание на фазу события представляет собой логическую величину: true или false. Здесь нужны более подробные пояснения.
Каждое событие в браузере, поддерживающем HTML 5, во время своей "жизни" проходит две фазы. Рассмотрим их по очереди.
Первая фаза - фаза захвата (capturing). Событие возникает в теле самой веб-страницы, потом - последовательно во всех элементах, являющихся родителями того, в котором это событие изначально произошло (источника), и, наконец, в самом элементе - источнике события.
Рассмотрим такой HTML-код:
[code]<HTML>
<BODY>
<DIV>
<P>Это <A HREF="">гиперссылка</A>.</P>
</DIV>
</BODY>
</HTML>[/code]
Предположим, что в гиперссылке возникло событие click (щелчок мышью). На фазе захвата это событие возникнет в следующих элементах веб-страницы и таком порядке:
- в теле веб-страницы (тег <BODY>);
- в блочном контейнере (тег <DIV>);
- в абзаце (тег <P>);
- в гиперссылке - источнике события (тег <A>).
Вторая фаза - фаза всплытия (bubbling). Событие снова возникает в родителе элемента - источника события, потом - в его родителе и т. д., пока не достигнет тела веб-страницы и не перестанет существовать. Можно сказать, что фаза всплытия обратна фазе захвата.
Для приведённого выше HTML-кода событие в процессе фазы всплытия пройдёт следующие элементы веб-страницы и в таком порядке:
- абзац;
- блочный контейнер;
- тело Web-страницы.
Фаза, в которой событие должно быть обработано, указывается в вызове метода addEventListener третьим параметром - это мы уже знаем. Логическое значение true обозначает фазу захвата, а значение false - фазу всплытия.
Вообще, если мы обрабатываем события прямо в их источнике (а так чаще всего и делают), не имеет значения, какую фазу события мы укажем в вызове метода addEventListener. Автор в этом случае предпочитает фазу всплытия (значение false третьего параметра).
Рассмотрим пару примеров привязки обработчиков к событиям.
[code]<SCRIPT>
function clickHandler()
{
. . .
}
</SCRIPT>
. . .
<A ID="a1" HREF="...">
. . .
<SCRIPT>
var oA1 = document.getElementById("a1");
oA1.addEventListener("click", clickHandler, false);
</SCRIPT>[/code]
Здесь мы объявили функцию-обработчик clickHandler и привязали её к событию click гиперссылки a1.
[code]<A ID="a1" HREF="...">
. . .
<SCRIPT>
var oA1 = document.getElementById("a1");
oA1.addEventListener("click",
function ()
{
. . .
}, false);
</SCRIPT>[/code]
А здесь мы поместили функцию-обработчик прямо в вызов метода addEventListener. Обратим внимание, что мы не указали имени этой функции, поскольку в данном случае оно не нужно. (Кстати, такие функции называются анонимными.)
3.2.2. Где расположить код обработчиков событий и код, выполняющий их привязку
Последний важный вопрос, который мы здесь рассмотрим, - где следует расположить код, объявляющий функции-обработчики, и код, собственно выполняющий их привязку.
Если в качестве обработчиков событий мы использует обычные функции с именами (именованные функции), то объявляющий их код следует поместить в секцию заголовка веб-страницы (тег <HEAD>). В таком случае браузер обработает код, объявляющий функции-обработчики, сразу же после начала загрузки веб-страницы, и к моменту окончания её загрузки эти функции будут полностью готовы.
Код же, выполняющий привязку обработчиков к событиям, следует располагать в самом конце секции тела веб-страницы (тега <BODY>). Обычно его помещают перед закрывающим тегом </BODY>.
Вот два примера, иллюстрирующие сказанное:
[code]<HTML>
<HEAD>
. . .
<SCRIPT>
function clickHandler()
{
. . .
}
</SCRIPT>
</HEAD>
<BODY>
. . .
<A ID="a1" HREF="...">
. . .
<SCRIPT>
var oA1 = document.getElementById("a1");
oA1.addEventListener("click", clickHandler, false);
</SCRIPT>
</BODY>
</HTML>[/code]
и
[code]<HTML>
<HEAD>
. . .
</HEAD>
<BODY>
. . .
<A ID="a1" HREF="...">
. . .
<SCRIPT>
var oA1 = document.getElementById("a1");
oA1.addEventListener("click",
function ()
{
. . .
}, false);
</SCRIPT>
</BODY>
</HTML>[/code]
Часто код, выполняющий привязку обработчиков к событиям, располагают вообще в самом конце кода веб-страницы - после закрывающего тега </HTML>. Так тоже можно делать, но, на взгляд автора, подобный код, вынесенный за пределы веб-страницы, выглядит несколько непривычно.
3.2.3. Пример обработки событий, возникающих в видеоролике
Напоследок для закрепления полученных знаний рассмотрим HTML-код веб-страницы с видеороликом. При наведении курсора мыши на этот видеоролик его воспроизведение начинается, а при уводе - приостанавливается.
[code]<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Видеоролик</TITLE>
</HEAD>
<BODY>
<VIDEO ID="vid1" SRC="movie.mp4"></VIDEO>
<SCRIPT>
var oVid1 = document.getElementById("vid1");
oVid1.addEventListener("mouseover",
function ()
{
oVid1.play();
}, false);
oVid1.addEventListener("mouseout",
function ()
{
oVid1.pause();
}, false);
</SCRIPT>
</BODY>
</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 (vid1.canPlayType("video/mp4") == "probably") {
var s = "Видеоролик MP4 будет обработан";
}
if (vid1.canPlayType("video/ogg") == "") {
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]<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Видеоролик</TITLE>
</HEAD>
<BODY>
<VIDEO ID="vid1" SRC="movie.mp4" AUTOPLAY></VIDEO>
<SCRIPT>
var oVid1 = document.getElementById("vid1");
oVid1.addEventListener("loadedmetadata",
function ()
{
oVid1.height = oVid1.videoHeight * 2;
oVid1.width = oVid1.videoWidth * 2;
}, false);
</SCRIPT>
</BODY>
</HTML>[/code]
Здесь мы указали в теге <VIDEO> атрибут AUTOPLAY, чтобы ролик сразу же начал воспроизводиться. Так будет проще оценить его новые размеры, установленные нашим веб-сценарием.
Мы привязываем обработчик к событию loadedmetadata, возникающему, как мы помним, сразу после того, как веб-браузер получит размеры изображения ролика и его продолжительность. Этот обработчик получает через свойства videoHeight и videoWidth размеры изображения ролика - высоту и ширину, - умножает каждый из этих размеров на два и присваивает свойствам ролика height и width соответственно. В результате ролик будет выведен на веб-страницу увеличенным вчетверо.
3.4.2. Программное управление аудиороликом
Здесь мы рассмотрим HTML-код веб-страницы с аудиороликом, управление которым осуществляется с помощью набора кнопок и веб-сценариев, выполняющихся при нажатии на них. Фактически мы реализуем ту же самую функциональность, что присутствует в самом веб-браузере (элементы управления воспроизведением, выводящиеся на экран, если тег <AUDIO> или <VIDEO> содержит атрибут CONTROLS), но, так сказать, своими силами. Код выглядит следующим образом:
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Аудиоролик</TITLE>
</HEAD>
<BODY>
<AUDIO ID="aud1" SRC="sound.mp3"></AUDIO>
<FORM>
<INPUT TYPE="button" ID="btnStart" VALUE="Старт" DISABLED>
<INPUT TYPE="button" ID="btnPause" VALUE="Пауза" DISABLED>
<INPUT TYPE="button" ID="btnVolumeUp" VALUE="Громче" DISABLED>
<INPUT TYPE="button" ID="btnVolumeDown" VALUE="Тише" DISABLED>
</FORM>
<SCRIPT>
var oAud1 = document.getElementById("aud1");
var oBtnStart = document.getElementById("btnStart");
var oBtnPause = document.getElementById("btnPause");
var oBtnVolumeUp = document.getElementById("btnVolumeUp");
var oBtnVolumeDown = document.getElementById("btnVolumeDown");
oAud1.addEventListener("canplaythrough",
function ()
{
oBtnStart.disabled = false;
oBtnVolumeUp.disabled = false;
oBtnVolumeDown.disabled = false;
oAud1.volume = 0.5;
}, false);
oBtnStart.addEventListener("click",
function ()
{
oAud1.play();
oBtnStart.disabled = true;
oBtnPause.disabled = false;
}, false);
oBtnPause.addEventListener("click",
function ()
{
oAud1.pause();
oBtnStart.disabled = false;
oBtnPause.disabled = true;
}, false);
oBtnVolumeUp.addEventListener("click",
function ()
{
var vol = oAud1.volume + 0.1;
if (vol > 1.0) vol = 1.0;
oAud1.volume = vol;
oBtnVolumeUp.disabled = (oAud1.volume == 1.0);
oBtnVolumeDown.disabled = false;
}, false);
oBtnVolumeDown.addEventListener("click",
function ()
{
var vol = oAud1.volume - 0.1;
if (vol < 0.0) vol = 0.0;
oAud1.volume = vol;
oBtnVolumeDown.disabled = (oAud1.volume == 0.0);
oBtnVolumeUp.disabled = false;
}, false);
</SCRIPT>
</BODY>
</HTML>
Сначала мы создаём на веб-странице аудиоролик без элементов управления. И указываем при этом, чтобы он не начинал воспроизводиться после окончания загрузки веб-страницы.
Далее мы создаём веб-форму с четырьмя обычными кнопками: запуска воспроизведения, его приостановки, увеличения и уменьшения громкости на 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. Получение сведений о видеоролике и состоянии его воспроизведения
Последняя веб-страница, код которой мы здесь рассмотрим, будет выводить сведения (продолжительность и размеры изображения) о находящемся на ней видеоролике и состоянии в котором он находится (загружается, готов к воспроизведению, воспроизведение выполняется, приостановлено или завершено). Код в данном случае выглядит следующим образом:
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Видеоролик</TITLE>
</HEAD>
<BODY>
<VIDEO ID="vid1" SRC="movie.mp4" CONTROLS></VIDEO>
<TABLE>
<TBODY>
<TR>
<TD>Продолжительность ролика, с.</TD>
<TD><DIV ID="divDuration"></DIV></TD>
</TR>
<TR>
<TD>Ширина изображения, пикселов</TD>
<TD><DIV ID="divWidth"></DIV></TD>
</TR>
<TR>
<TD>Высота изображения, пикселов</TD>
<TD><DIV ID="divHeight"></DIV></TD>
</TR>
<TR>
<TD>Состояние</TD>
<TD><DIV ID="divState"></DIV></TD>
</TR>
</TBODY>
</TABLE>
<SCRIPT>
var oVid1 = document.getElementById("vid1");
var oDivState = document.getElementById("divState");
oVid1.addEventListener("loadstart",
function ()
{
oDivState.innerHTML = "Начал загружаться";
}, false);
oVid1.addEventListener("canplaythrough",
function ()
{
oDivState.innerHTML = "Готов к воспроизведению";
}, false);
oVid1.addEventListener("loadedmetadata",
function ()
{
var oDivDuration = document.getElementById("divDuration");
oDivDuration.innerHTML = oVid1.duration;
var oDivWidth = document.getElementById("divWidth");
oDivWidth.innerHTML = oVid1.videoWidth;
var oDivHeight = document.getElementById("divHeight");
oDivHeight.innerHTML = oVid1.videoHeight;
}, false);
oVid1.addEventListener("playing",
function ()
{
oDivState.innerHTML = "Начал воспроизводиться";
}, false);
oVid1.addEventListener("timeupdate",
function ()
{
oDivState.innerHTML = "Воспроизводится";
}, false);
oVid1.addEventListener("seeking",
function ()
{
oDivState.innerHTML = "Прокручивается";
}, false);
oVid1.addEventListener("pause",
function ()
{
oDivState.innerHTML = "Приостановлен";
}, false);
oVid1.addEventListener("ended",
function ()
{
oDivState.innerHTML = "Завершён";
}, false);
oVid1.addEventListener("waited",
function ()
{
oDivState.innerHTML = "Подгружается";
}, false);
oVid1.addEventListener("error",
function ()
{
oDivState.innerHTML = "Возникла ошибка";
}, false);
</SCRIPT>
</BODY>
</HTML>
Свойство innerHTML задаёт или возвращает в виде строки HTML-код, описывающий содержимое какого-либо элемента веб-страницы. В веб-сценариях данного примера мы используем это свойство для того, чтобы поместить в контейнеры <DIV> различные сведения о ролике.
В остальном читатели сами могут разобраться, как функционируют веб-сценарии этого примера. Всё, что здесь используется, было описано ранее в этой статье.
4. Дополнительные источники
Февраль 2011
Комментарии
Уууу, достали. Запилите XAML+CLR в браузеры и будет вам счастье.
закончится все тем, что юзеры перейдут на универсальный браузер, который будет читать все и сразу, либо придется иметь на системе по 3-4 браузера под его форматы
Maxthon 3 - отличный браузер, имеет два движка - это интернет эксплореровский движок который стоит у вас на компьютере и Webkit 
