Опубликован: 19.03.2007 | Уровень: для всех | Доступ: платный
Лекция 9:

Воспроизведение мультимедиа

Программирование плеера

При задании для параметра uiMode значения value="none", элементы управления плеера Media Player не выводятся. Выводится только экран. Это может быть подходящей настройкой, когда плеер запускается автоматически или если пользователь знает, что элементы управления доступны для запуска и остановки воспроизведения в "контекстном меню", выводимом при щелчке правой кнопкой мыши в окне плеера. Однако обычно стандартные элементы управления скрыты, потому что они будут запрограммированы самостоятельно.

Хотя это не учебник по программированию страниц Web, достаточно просто задать свои собственные управляющие кнопки для Media Player. Это сделано для показанного ниже плеера.

Программирование Media Player

Рис. 9.7. Программирование Media Player
<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="70" height="70">
  <param name="URL" value="Never Be Hungry.wav"/>
  <param name="autoStart" value="false"/>
  <param name="uiMode" value="none"/>
</object>

<input type="button" value="Start" style="font-size:8pt"
  onclick="Player.controls.play()"/>
<input type="button" value="Stop" style="font-size:8pt"
  onclick="Player.controls.stop()"/>
Листинг 9.5. Код программирования элементов управления Media Player

Прежде всего, необходимо задать для Player значение id, чтобы на него можно было ссылаться в сценарии. Здесь id="Player" присваивается тегу <object>. Параметру uiMode задается значение value="none", чтобы подавить вывод элементов управления, автозапуск autoStart выключается, а свойства стиля width и height задают размер экрана визуализации.

При удалении панели управления необходимо создать собственные кнопки "Start" и "Stop" для управления плеером. Эти кнопки создаются с помощью элементов управления <input type="button"/>. (Создание кнопок рассматривается далее).

Чтобы сделать кнопки реагирующими на щелчок мыши, кнопкам добавляется обработчики событий onclick. Эти обработчики событий кодируются с помощью операторов JavaScript для управления плеером. Для кнопки "Start" оператор Player.controls.play() вызывает метод play() плеера Player, чтобы начать воспроизведение, для кнопки "Stop" оператор Player.controls.stop() вызывает метод stop() плеера Player, чтобы остановить воспроизведение. Вот, собственно, и все.

Фактически не требуется даже вообще выводить плеер Player. Для воспроизведения аудио можно скрыть его полностью и включать и выключать звук с помощью запрограммированных кнопок. Задайте в коде для тега <object> значения width и height как 0px и создайте кнопки управления.

Кнопки скрытого Media Player

Рис. 9.8. Кнопки скрытого Media Player
<object id="Player2" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="0" height="0">
  <param name="URL" value="Never Be Hungry.wav"/>
  <param name="autoStart" value="false"/>
</object>

<input type="button" value="Start" 
  onclick="Player2.controls.play()"/>
<input type="button" value="Stop" 
  onclick="Player2.controls.stop()"/>
Листинг 9.6. Код программирования скрытого Media Player

Так как Media Player невидим, то не имеет значения, где на странице записывается тег <object>.

Если посмотреть внимательно, то можно заметить небольшую точку в нижнем левом углу кнопки "Start". Это Media Player, редуцированный до одной точки, при задании его ширины и высоты равными 0 пикселей. Если желательно полностью исключить точку, включите таблицу стилей для Player с width:0px и height:0px.

Воспроизведение нескольких звуков

После небольшой модификации сценария можно воспроизводить несколько звуков с помощью одного и того же Media Player. В следующем примере проигрываются голоса четырех различных животных при щелчке на четырех отдельных тегах <img/>. Тег <object> скрывает Media Player и не задает никаких тегов <param>. Поэтому никакой файл для воспроизведения не задается; только невидимый плеер встроен в страницу.

Воспроизведение нескольких звуковых файлов через один Media Player

Рис. 9.9. Воспроизведение нескольких звуковых файлов через один Media Player
<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
    width="0" height="0">
</object>

<img src="Bullfrog.gif" alt="Picture of bullfrog"
  onclick="Player.URL='Bullfrog.wav'; Player.controls.play()"/>
<img src="Goat.gif" alt="Picture of goat"
  onclick="Player.URL='Goat.wav'; Player.controls.play()"/>
<img src="Lion.gif" alt="Picture of lion"
  onclick="Player.URL='Lion.wav'; Player.controls.play()"/>
<img src="Rooster.gif" alt="Picture of rooster"
  onclick="Player.URL='Rooster.wav'; Player.controls.play()"/>
Листинг 9.7. Код для воспроизведения нескольких звуковых файлов через один Media Player

В обработчиках событий требуется пара операторов JavaScript. Первый оператор присваивает звуковой файл свойству URL плеера: Player.URL='filename.wav'; второй оператор запускает его воспроизведение: Player.controls.play(). Не нужно кодировать сценарий stop(), так как звуки будут очень короткими.

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

Даже человек, незнакомый с языком JavaScript, сможет модифицировать и включить этот сценарий в любой тег, который будет использоваться для загрузки и воспроизведения звуковых файлов встроенным плеером Media Player.

Фоновые звуки

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

<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="0" height="0">
  <param name="URL" value="BkgndSound.wav"/>
  <param name="autoStart" value="true"/>
</object>
Листинг 9.8. Код воспроизведения фонового звука

Здесь, так как Player невидим, не имеет значения, где на странице кодируется этот тег <object>. Как только страница заканчивает загружаться, начинается загрузка и воспроизведение звука. Когда происходит переход к другой странице, то воспроизведение аудио останавливается.

Исключенный тег embed

Media Player можно встраивать в страницу Web с помощью тега <embed/>, общий формат которого показан ниже.

<embed src="url" autostart="true|false"/>

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

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!

Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989
Галина Матрук
Галина Матрук
Молдова, Республика, Кишинев, UTM, 2010