JavaScript и jQuery / Управление HTML5-плеером с помощью 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 class="barContainer"> 
   <div id="durationBar"> 
       <div id="positionBar">
           <span id="displayStatus">0</span>
       </div> 
   </div>
</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 id="videoPlayer" onTimeUpdate="progressUpdate()">

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.

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

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

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

<!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"...