Управление HTML5-плеером с помощью JavaScript

Веб-программирование --- HTML5 --- Управление HTML5-плеером с помощью JavaScript

На данный момент мы изучили довольно сложный материал. Мы теперь знаем, как с помощью элементов <audio> и <video> создать решение с достаточно удовлетворительным уровнем браузерной поддержки, которое работает на большем количестве браузеров, чем сегодняшние решения на основе Flash. Совсем неплохо для необкатанной новой технологии!

Используя только HTML-разметку, это, пожалуй, все, что можно выжать из элементов <audio> и <video>. Но для обоих элементов существует обширная объектная модель JavaScript, посредством которой можно управлять воспроизведением с помощью сценариев. Более того, используя этот подход, можно даже настроить некоторые детали, такие как, например, скорость воспроизведения, что невозможно со стандартными аудио- и видеопроигрывателями.

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

Создание своего видеопроигрывателя

Одним из основных поводов заняться углубленным изучением программирования элементов <audio> и <video> в JavaScript будет создание собственного проигрывателя. Основная идея заключается в простоте процесса — удаляем атрибут controls, чтобы было только окно воспроизведения, и добавляем внизу его свои кнопки управления воспроизведением. А чтобы эти кнопки функционировали, добавляем соответствующий JavaScript-код.

Любому видеопроигрывателю требуется базовый набор кнопок управления воспроизведением. Стандартные кнопки управления воспроизведением проигрывателя создаются следующим кодом:

<video id="videoPlayer" width="600" height="400">
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogv" type="video/ogg">
</video>
<div>
    <button onclick="play()">Play</button>
    <button onclick="pause()">Pause</button>
    <button onclick="stop()">Stop</button>
    <button onclick="speedUp()">Быстрей</button>
    <button onclick="slowDown()">Медленее</button>
    <button onclick="normalSpeed()">Нормальная скорость</button>
</div>

var video;
var display;

window.onload = function() {
	video = document.getElementById("videoPlayer");
};

function play() {
    video.play();
}

function pause() {
    video.pause();
}

function stop() {
    video.pause();
    video.currentTime = 0;
}

Функции других кнопок управления воспроизведением не совсем стандартные - они используются для регулирования скорости воспроизведения путем значения свойства playbackRate. Например, при значении playbackRate равным 2 видео проигрывается вдвое быстрее нормальной скорости, но с откорректированной высотой тона, вследствие чего звук воспроизводится нормально, только вдвое быстрее.

Это замечательная возможность для ускоренного просмотра медленных видеоинструкций. Аналогично, при значении playbackRate равном 0.5 видео проигрывается со скоростью, составляющей половину нормальной скорости. При значении playbackRate равном -1 видео должно проигрываться с нормальной скоростью, только в обратном направлении, но браузеры сталкиваются с проблемой реализации этого режима должным образом. Код для реализации этих функций следующий:

function speedUp() {
    video.play();
    video.playbackRate = 2;
}

function slowDown() {
    video.play();
    video.playbackRate = 0.5;
}

function normalSpeed() {
    video.play();
    video.playbackRate = 1;
}

Задача создания индикатора хода воспроизведения представляет несколько больший интерес. В отношении разметки он создается из двух элементов <div>, один из которых вложен в другой, который находится в корневом контейнере (в данном примере тоже div):

<div class="barContainer">
  <div id="durationBar">
    <div id="positionBar"><span id="displayStatus">0</span></div>
  </div>
</div>

Индикатор хода воспроизведения является примером ситуации, идеально подходящей для использования элемента <progress>. Но уровень браузерной поддержки элемента <progress> все еще низкий, намного ниже, чем возможности видео HTML5. Поэтому в этом примере подобно выглядящий индикатор создается с помощью двух элементов <div>.

Внешний элемент <div> (с именем durationBar) рисует черную рамку, которая обрамляет весь индикатор и имитирует полную продолжительность видео. Внутренний элемент <div> (с именем positionBar) указывает текущую точку воспроизведения, заполняя часть черного индикатора синим цветом. Наконец, элемент <span> внутри внутреннего элемента <div> содержит текст, указывающий текущую позицию воспроизведения в секундах.

Далее приведены правила таблицы стилей, которые устанавливают размер индикаторов и окрашивают их в соответствующие цвета:

#positionBar {
   height: 30px;
   color: white;
   font-weight: bold;
   background: steelblue;
   text-align: center;
}

#positionBar span {
   display: inline-block;
   margin-top: 5px;
}

#durationBar {
   border: solid 1px black;
   width: 100%;
   margin-bottom: 5px;
}

В процессе воспроизведения элемент <video> постоянно активирует событие onTimeUpdate. Реагируя на это событие, обновляем индикатор хода воспроизведения:

<video id="videoPlayer" onTimeUpdate="progressUpdate()">
   ...

А этот код получает от свойства currentTime значение текущей позиции в видео, разделяет его на общее время (свойство duration) и преобразует результат в процентное значение, которое используется для установления размера div-элемента postitionBar:

function progressUpdate() {
	// Устанавливаем позицию воспроизведения
    var positionBar = document.getElementById("positionBar");
    positionBar.style.width = (video.currentTime / video.duration * 100)  + "%";
	
	// Заполняем текстовую надпись текущим значением
	displayStatus = document.getElementById("displayStatus");
    displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) + " сек";
  }

Можно сделать индикатор выполнения немного замысловатей, добавив индикатор загрузки, показывающий объем содержимого, загруженного и помещенного в буфер в данный момент. Эта возможность уже имеется в проигрывателях, встроенных в браузеры. Чтобы добавить этот индикатор, нужно обрабатывать событие onProgress и работать со свойством seekable. Дополнительную информацию о свойствах, методах и событиях элемента <video> смотрите на странице msdn.microsoft.com/ru-ru/library/ff975073.aspx.

Проигрыватели на JavaScript

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

К счастью, для веб-дизайнеров, блуждающих в поисках идеального HTML5-проигрывателя, имеется лучший вариант. Вместо того чтобы разрабатывать мультимедийный проигрыватель самому, можно взять бесплатный, настраиваемый посредством JavaScript проигрыватель в Интернете. Два из них — это VideoJS и, для фанатов библиотеки jQuery - jPlayer. Оба проигрывателя легковесные, удобны в использовании, а также имеют функцию смены скинов с помощью таблицы стилей. Например сервис VideoJS позволяет создать вручную скин медиаплеера:

Большинство проигрывателей мультимедиа на JavaScript (включая проигрыватели VideoJS и jPlayer) содержат встроенные резервные решения Flash, что позволяет разработчику сэкономить время и усилия на поиски отдельного Flash-проигрывателя. А проигрыватель jPlayer имеет удобную функцию создания списка воспроизведения, позволяющего выбрать для проигрывания или просмотра несколько файлов.

Чтобы использовать VideoJS в своих разработках, сначала загрузите его JavaScript-файлы с веб-сайта проигрывателя. Потом вставьте ссылку на его сценарий и таблицы стилей, как показано в следующем коде:

<!DOCTYPE html>
<html>
<head>
  <title>...</title>
  <link href="video-js.css" rel="stylesheet" type="text/css">
  <script src="video.js"></script>
</head>
...

Затем используется обычный элемент <video> с несколькими элементами <source> и резервным решением Flash. (Для резервного Flash-решения в проигрывателе VideoJS используется Flowplayer, но его можно удалить и использовать другой Flash-проигрыватель.) По сути, единственная разница между обычной страницей HTML5 и страницей с проигрывателем VideoJS состоит в том, что в последней нужно использовать специальный класс в элементе <video>:

<video class="video-js vjs-default-skin"...