Как написать видеоплеер на html

Время на прочтение
9 мин

Количество просмотров 171K

Ранее мы уже рассмотрели общие вопросы использования HTML5 Audio и Video и начали погружаться в детали, начав с задачи определения поддержки браузером нужного кодека. Сегодня мы рассмотрим задачу создания собственного видео-плеера на HTML5 Video.

Напомню, что video-элемент сам по себе уже обеспечивает необходимый набор контролов для управления проигрыванием. Чтобы была видна панель управления воспроизведением, достаточно указать атрибут controls.

<video src="trailer_480p.mp4" width="480" height="270" poster="poster.gif" controls />

Однако, как я отмечал в вводной статье, со стандартными контролами есть проблема, которая заключается как раз в том, что выглядят они нестандартно. Другими словами, в каждом браузере они выглядят по-своему (проверить, как выглядят контролы в разных браузерах, можно на примере Video Format Support на ietestdrive.com — просто откройте его в двух-трех различных браузерах).

API для управления воспроизведением

Стандарт HTML5 для работы с видео вводит в DOM новый интерфейс — HTMLVideoElement, наследующий в свою очередь интерфейс HTMLMediaElement.

Интерфейс HTMLMediaElement

Это общий интерфейс для обоих медиа-элементов (аудио и видео), описывающий доступ к базовым возможностями работы с медиа-контентом: контроль источника контента, управление воспроизведением, изменение уровня звука и обработка ошибок. Основные свойства и методы, которые нам понадобятся:

Состояние сети и готовность к работе
src — ссылка (url) на воспроизводимый контент
buffered — буферизованные куски видео

Воспроизведение и контролы
currentTime — текущий момент проигрывания (с.)
duration — длительность медиа-контента (с.)
paused — находится ли воспроизведение на паузе
ended — закончилось ли проигрывание
muted — включение/выключение звука
volume — уровень звука [0, 1]
play() — начать проигрывание
pause() — поставить на паузу

События
oncanplay — можно начать проигрывание
ontimeupdate — изменена позиция проигрывания
onplay — запущено проигрыв
onpause — нажата пауза
onended — воспроизведение закончилось

Важно: это далеко не все методы и свойства, выставляемые через интерфейс HTMLMediaElement.

Интерфейс HTMLVideoElement

Видео отличается от аудио несколькими дополнительными свойствами:
width и height — ширина и высота контейнера для проигрывания видео;
videoWidth и videoHeight — внутреннее значение ширины и высоты видео, если размеры не известны, равны 0;
poster — ссылка на картинку, которую можно показывать, пока видео недоступно (обычно это один
из первых непустых кадров).

Разница между width/height и videoWidth/videoHeight в том, что последние — это собственные характеристики видео, в частности, с учетом соотношения сторон и других характеристик, в то время как контейнер для видео может быть любых размеров (больше, меньше, с другой пропорцией).

Play & Pause

Создание нашего собственного видео-плеера мы начнем с простой задачи: научимся запускать видео на проигрывание и останавливать воспроизведение. Для этого нам понадобятся методы play() и pause() и несколько свойств, описывающих текущее состояние видео-потока (мы также будем использовать библиотеку jQuery, не забудьте ее подключить).

Первым делом нам необходим video-элемент, которым мы хотим управлять, и элемент на который можно нажимать для управления текущим состоянием:

<div>
    <video id="myvideo" width="480" height="270" poster="poster.gif" >
        <source src="trailer_480p.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
        <source src="trailer_480p.webm" type='video/webm; codecs="vorbis,vp8"'/> 
    </video>
</div>
<div id="controls">
    <span id="playpause" class="paused" >Play</span>
</div>

#controls span {
    display:inline-block;
}
        
#playpause {
    background:#eee;
    color:#333;
    padding:0 5px;
    font-size:12pt;
    text-transform:uppercase;
    width:50px;
}

Обратите внимание на инвертирование состояния кнопки (paused) и действия (play).

Теперь надо добавить немного js-кода, чтобы нажатие на кнопку play переключало ее состояние и соответственно запускало видео-ролик или ставило его на паузу:

$(document).ready(function(){
    var controls = {
        video: $("#myvideo"),
        playpause: $("#playpause")                 
    };
                
    var video = controls.video[0];
               
    controls.playpause.click(function(){
        if (video.paused) {
            video.play();
            $(this).text("Pause");    
        } else {
            video.pause();
            $(this).text("Play");
        }
                
        $(this).toggleClass("paused"); 
    });
}); 

При желании можно сразу добавить несколько css-стилей для кнопок управления и их различных состояний и…

… казалось бы, все уже замечательно работает, но не тут-то было! Есть несколько мелочей, которые нам также нужно учесть.

Проигрывание сначала

Во-первых, нам нужно правильно обработать окончание проигрывания видео-ролика (если, конечно, оно не зациклено), и в этот момент нужно переключить кнопки управления так, чтобы вместо состояния «pause» было состояние «play»:

video.addEventListener("ended", function() {
    video.pause();
    controls.playpause.text("Play");
    controls.playpause.toggleClass("paused");
});

Контекстное меню

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

video.addEventListener("play", function() {
    controls.playpause.text("Pause");
    controls.playpause.toggleClass("paused");
});
                
video.addEventListener("pause", function() {
    controls.playpause.text("Play");
    controls.playpause.toggleClass("paused");
});

Так как у нас становится многовато мест, где меняется внешний вид, самое время попутно произвести небольшой рефакторинг, убрав из изначального переключения режимов теперь уже дублирующую смену внешнего состояния:

var controls = {
    ...  
    togglePlayback: function() {
        (video.paused) ? video.play() : video.pause();
    }
    ...
};
                
controls.playpause.click(function(){
    controls.togglePlayback();
});

Кликабельное видео

Наконец, наверняка, нам захочется, чтобы проигрывание и пауза переключались по нажатию на само видео, поэтому нужно добавить еще несколько строчек:

controls.video.click(function() {
    controls.togglePlayback();
});

Текущий результат:

Прогресс

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

<span id="progress">
    <span id="total">
        <span id="buffered"><span id="current">​</span></span>
    </span>
</span>
<span id="time">
    <span id="currenttime">00:00</span> / 
    <span id="duration">00:00</span>
</span>

И соответствующие стили:

#progress {
    width:290px;
}
            
#total {
    width:100%;                
    background:#999;
}
            
#buffered {
    background:#ccc;
}
            
#current {
    background:#eee;
    line-height:0;
    height:10px;
}
            
#time {
    color:#999;
    font-size:12pt;
}

И несколько ссылок на соответствующие элементы для быстрого доступа в объект controls:

var controls = {
    ...
    total: $("#total"),
    buffered: $("#buffered"),
    progress: $("#current"),
    duration: $("#duration"),
    currentTime: $("#currenttime"),
    hasHours: false,
    ...
};

Первым делом, нам нужно понять, какова длительность ролика — для этого у video-элемента есть свойство duration. Отследить это значение можно, например, в момент готовности ролика к проигрыванию — по событию oncanplay:

video.addEventListener("canplay", function() {
    controls.hasHours = (video.duration / 3600) >= 1.0;                    
    controls.duration.text(formatTime(video.duration, controls.hasHours));
    controls.currentTime.text(formatTime(0),controls.hasHours);
}, false);

В данном случае, мы попутно определяем, нужно ли отображать количество часов в видео-плеере (кстати, вообще говоря, спецификация предполагает, что длительность ролика может изменяться — в этот момент срабатывает событие ondurationchange, и к тому же быть бесконечной — например, при стриминге радио).

Также мы используем специальную функцию formatTime для перевода секунд в формат HH:mm:ss или mm:ss:

function formatTime(time, hours) {
    if (hours) {
        var h = Math.floor(time / 3600);
        time = time - h * 3600;
                    
        var m = Math.floor(time / 60);
        var s = Math.floor(time % 60);
                    
        return h.lead0(2)  + ":" + m.lead0(2) + ":" + s.lead0(2);
    } else {
        var m = Math.floor(time / 60);
        var s = Math.floor(time % 60);
                    
        return m.lead0(2) + ":" + s.lead0(2);
    }
}
            
Number.prototype.lead0 = function(n) {
    var nz = "" + this;
    while (nz.length < n) {
        nz = "0" + nz;
    }
    return nz;
};

Для отображения процесса проигрывания нам понадобится событие ontimeupdate, срабатывающее при изменении текущего момента:

video.addEventListener("timeupdate", function() {
    controls.currentTime.text(formatTime(video.currentTime, controls.hasHours));
                    
    var progress = Math.floor(video.currentTime) / Math.floor(video.duration);
    controls.progress[0].style.width = Math.floor(progress * controls.total.width()) + "px";
}, false);

Свойство currentTime выдает в секундах текущее время. Его же можно использовать, чтобы изменить время проигрывания:

controls.total.click(function(e) {
    var x = (e.pageX - this.offsetLeft)/$(this).width();
    video.currentTime = x * video.duration;
});

Также будет полезным показывать буферизацию видео, для этого можно отталкиваться от события onprogress, срабатывающего при загрузке новых порций видео:

video.addEventListener("progress", function() {
    var buffered = Math.floor(video.buffered.end(0)) / Math.floor(video.duration);
    controls.buffered[0].style.width =  Math.floor(buffered * controls.total.width()) + "px";
}, false);

Важный нюанс относительно свойства buffered, который нужно иметь в виду, заключается в том, что он предоставляет не просто время в секундах, а промежутки времени в виде объекта TimaRanges. В большинстве случаев это будет только один промежуток с индексом 0, и начинающийся с отметки 0c. Однако, если браузер использует HTTP range запросы к серверу, например, в ответ на попытки перейти к другим фрагментам видео-потока, промежутков может быть несколько. Также надо учитывать, что в зависимости от реализации браузер может удалять из буфера памяти уже проигранные куски видео.

Промежуточный результат:

Звук

Наконец, давайте добавим еще небольшой штрих к нашем видео-плееру — возможность включать и выключать звук. Для этого добавим небольшой контрол с динамиком (SVG-иконка взята с сайта The Noun Project):

<span id="volume">
    <svg id="dynamic" version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="16px" height="16px" viewBox="0 0 95.465 95.465">
        <g >
            <polygon points="39.323,20.517 22.705,37.134 0,37.134 0,62.865 22.705,62.865 39.323,79.486 "/>
            <path d="M52.287,77.218c14.751-15.316,14.751-39.116,0-54.436c-2.909-3.02-7.493,1.577-4.59,4.59
                        c12.285,12.757,12.285,32.498,0,45.254C44.794,75.645,49.378,80.241,52.287,77.218L52.287,77.218z"/>
            <path d="M62.619,89.682c21.551-22.103,21.551-57.258,0-79.36c-2.927-3.001-7.515,1.592-4.592,4.59
                        c19.08,19.57,19.08,50.608,0,70.179C55.104,88.089,59.692,92.683,62.619,89.682L62.619,89.682z"/>
            <path d="M75.48,99.025c26.646-27.192,26.646-70.855,0-98.051c-2.936-2.996-7.524,1.601-4.592,4.59
                        c24.174,24.674,24.174,64.2,0,88.871C67.956,97.428,72.545,102.021,75.48,99.025L75.48,99.025z"/>
        </g>
        </svg>
</span>

С соответствующими стилями для включенного и выключенного состояний:

#dynamic {
    fill:#333;
    padding:0 5px;
}
            
#dynamic.off {
    fill:#ccc;
}

Для переключения состояния динамика нам понадобится свойство mute:

controls.dynamic.click(function() {
    var classes = this.getAttribute("class");

    if (new RegExp('\boff\b').test(classes)) {
        classes = classes.replace(" off", "");
    } else {
        classes = classes + " off";
    }

    this.setAttribute("class", classes);
                    
    video.muted = !video.muted;
});

(Стандартные методы jQuery для переключения css-классов не работают с SVG-элементами.)
Если вы хотите также менять уровень громкости, то вам поможет свойство volume, принимающее значения в диапазоне [0, 1].

Финальный результат:

Что еще…

Помимо того, что вы легко можете настроить стили элементов управления по своему усмотрению, есть еще несколько важных моментов, которые остаются за пределами этой статьи, но о которых полезно помнить в реальном проекте:

• проверка поддержки браузером HMTL5 Video,
• программное определение и переключение поддерживаемых кодеков,
• поддержка субтитров, в том числе для обеспечния accessibility.

Также не забудьте, что привязку событий к элементам управления нужно делать после того, как стало понятно, что видео доступно для проигрывания (oncanplay):

video.addEventListener("canplay", function() {
    ...
}, false);

Либо нужно делать соответствующие проверки или отлавливать возможные исключения. Исключения вообще надо отлавливать, например, событие onerror, возникающее при ошибке загрузки видео-потока

Из дополнительных опций, которые могут вам понадобиться: изменение скорости проигрывания. Для этого есть свойство playbackRate и соответствующее событие onratechange.

Готовые плееры

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

• VideoJS
• MediaElementJS
• Kaltura
• JW Player
• LeanBack Player
• Табличка со сравнениями плееров

Наконец, HTML5 Video в спецификации.

В этой статье вы прочитаете как сделать на чистом javascript видеоплеер, или на HTML.

Также у нас на сайте есть статья о том, как сделать аудиоплеер на JavaScript и HTML, если вам это интересно, то посмотрите.

Делаем видеоплеер на JavaScript:

Для начала разберём как будем делать видеоплеер на JS и что мы реализуем, с начала мы возьмём элемент <video> и будем брать данные о видео, менять их и выводить при необходимости.

А реализуем мы кнопки перемотки и пауза/плай, также видео дорожку и перемотку на нужную часть видео под средством нажатия на неё.

HTML:

Для начала конечно нужно в HTML объявить элемент <video>, с атрибутом controls, он нужен что бы уже какие то кнопки были для управления видео.

Вот результат.

Как видите в браузере уже, какой то плеер, но опять же это только базовый, поэтому мы уберём атрибут controls, и у нас будет просто видео.

Дальше уже буду показывать как сделать плеер с нуля, что бы вы поняли как можно работать с видео в JavaScript, поэтому сейчас изменю HTML.

Тут в целом всё понятно, единственное скажу, что элемент с классом video-track, это видео дорожка.

Если вам тут что то не понятно или плохо знаете HTML, то посмотрите наш учебник по HTML.

CSS:

Теперь перейдём к CSS, не много изменим вид, вот вёрстка.

Вот результат.

В целом тут всё просто, но если не понятно, то посмотрите наш учебник по CSS.

JavaScript:

Теперь перейдём к самому главному, это к созданию кода на JavaScript, и логики, сначала посмотрим какие элементы нужно подключить.

Тут мы берём элемент <video> по id остальное берём по селектору.

Дальше будем делать событие кнопок, сначала посмотрим работу с запуском видео.

Давайте разберём этот код, в начале через video.play() запускаем проигрывание видео, а потом запускаем интервал, он нам нужен для отображение сколько прошло времени от начала видео, на видео дорожке.

Внутри него создаём две переменных, videoTime отвечает за то, сколько уже секунд проигрывается видео, videoLength содержит сколько всего секунд длится видео, потом по формуле определяем сколько процентов видео прошло, и отображаем это на видео дорожке с помощью элемента с классом timeline, назначив ему этот процент в качестве ширины.

Теперь посмотрите на код нажатия на кнопку паузы.

Как видите с помощью video.pause(), останавливаем воспроизведение и потом удаляем работу интервала.

Дальше идёт код для перемотки видио, но он очень простой.

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

Последнее что осталось сделать, так это что бы при нажатие на видео дорожку автоматически переключалось время.

На мой взгляд эта самая интересная часть программы, сначала мы присваиваем переменной posX, позицию клика по «X», и вычитаем из него восемь, это нужно, так как левый отступ у нас равен восьми, а вычисляет e.clientX от размеров всего экрана.

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

Также ниже можете скачать файлы этого плеера, что бы проверить как он работает.

Вывод:

В этой статье вы прочитали как сделать на javascript видеоплеер, и на HTML тоже, думаю вам понравилось.

Но если вы заметили, там есть много не доработок, например, видео не делается на полный экран или не показывается сколько времени осталось до окончания.

Если вы хотите это исправить, то скачайте файлы и используя сайты по этим ссылкам (сайт 1, сайт 2), они вам помогут.

Подписываетесь на соц-сети:

Также рекомендую:

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

Чтобы создать плеер, достаточно такого кода для аудио:

<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
</audio>

И такого — для видео:

<video src="video.mp4" poster="poster.jpg" controls></video>

Атрибут controls используется для того, чтобы отобразить элементы управления. Если его не указать, никакого интерфейса не будет: аудиоплеер не будет отображаться, а в видеоплеере просто будет показан кадр из видео или постер.

Обратите внимание, как указан источник. Для видео достаточно прописать атрибут src, а для аудио нужно прописывать дополнительные элементы source, чтобы указать пути и формат файлов. В коде выше добавлено два одинаковых файла, но в разных расширениях — это нужно для того, чтобы прослушать запись можно было на всех устройствах и во всех браузерах, потому что не все из них поддерживают mp3 или какой-то другой формат.

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

Вот список атрибутов, которые можно указать для плеера:

• controls — панель управления;
• autoplay — автовоспроизведение;
• loop — цикличность;
• muted — выключение звука;
• poster — обложка видео. Если не указать, будет выбран случайный кадр;
• preload — предварительная загрузка. Существует 3 значения: auto (полностью), metadata (небольшую часть, чтобы определить основные метаданные) и none (без загрузки);
• src — ссылка на файл.

Также можно указать высоту и ширину.

Существует элемент <track>, который размещается внутри плеера, — в нем указывается путь к текстовым файлам: субтитрам или метаданным. Для них прописываются следующие атрибуты:

• default — указывает на дорожку, которая используется по умолчанию;
• kind — тип файла, можно указать следующие значения:
• subtitles — субтитры (стоит по умолчанию),
• captions — субтитры для глухонемых,
• chapters — название глав и их временные рамки,
• descriptions — звуковое описание происходящего для слепых,
• metadata — метаданные;
• label — название дорожки;
• src — путь к файлу;
• srclang — язык дорожки.

Всего этого достаточно, чтобы вставить простой плеер на сайт, но некоторых функций у него все-таки нет:

• можно убрать звук, но нельзя регулировать громкость;
• нельзя менять скорость воспроизведения;
• нельзя поставить на повтор и так далее.

Поэтому мы подключаем JS и пишем свой интерфейс.

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

<div class='video-container'>
<video src="video.mp4" poster='preview.jpg' class='video-player' id='video-player' preload='metadata'></video>
<div class='video-hud'>
<div class='video-hud__element video-hud__action video-hud__action_play' id='video-hud__action'></div>
<div class='video-hud__element video-hud__curr-time' id='video-hud__curr-time'>00:00</div>
<progress value='0' max='100' class='video-hud__element video-hud__progress-bar' id='video-hud__progress-bar'></progress>
<div class='video-hud__element video-hud__duration' id='video-hud__duration'>00:00</div>
<div class='video-hud__element video-hud__mute video-hud__mute_false' id='video-hud__mute'></div>
<input type='range' value='100' max='100' title='Громкость' class='video-hud__element video-hud__volume' id='video-hud__volume'>
<select title='Скорость' class='video-hud__element video-hud__speed' id='video-hud__speed'>
<option value='25'>x0.25</option>
<option value='50'>x0.50</option>
<option value='75'>x0.75</option>
<option value='100' selected>x1.00</option>
<option value='125'>x1.25</option>
<option value='150'>x1.50</option>
<option value='175'>x1.75</option>
<option value='200'>x2.00</option>
</select>
<a class='video-hud__element video-hud__download' title='Скачать' href='video.mp4' download></a>
</div>
</div>

И задать ему стили:

.video-container {
background:#000;
width:80%;
color:#fff;
}
.video-player {
width:100%;
margin:0;
}
.video-hud {
margin:0;
padding:1px;
}
.video-hud__element {
cursor:pointer;
display:inline-block;
vertical-align:middle;
height:30px;
}
.video-hud__action {
width:30px;
}
.video-hud__action_play {
background:#ccc;
border-radius:0 100px 100px 0;
}
.video-hud__action_pause {
background:#c00;
}
.video-hud__mute {
width:30px;
border-radius:100px 100px 100px 100px;
}
.video-hud__mute_true {
background:#c00;
}
.video-hud__mute_false {
background:#ccc;
}
.video-hud__download {
background:#ccc;
width:30px;
border-radius:0 0 100px 100px;
}

Выглядит это вот так:

Нас пока не интересует красивое оформление, но в этом варианте есть всё необходимое:

• кнопка старта и паузы;
• текущее время (в том числе и на прогресс-баре);
• общая длительность;
• кнопка отключения звука;
• шкала громкости;
• выбор скорости;
• кнопка скачивания.

Теперь нужно написать функции, которые будут отдавать команды плееру. Начнем с получения объектов, запуска и паузы:

//Получаем объекты
//Плеер
var videoPlayer = document.getElementById('video-player');
//Время
var progressBar = document.getElementById('video-hud__progress-bar');
var currTime = document.getElementById('video-hud__curr-time');
var durationTime = document.getElementById('video-hud__duration');
//Кнопки
var actionButton = document.getElementById('video-hud__action');
var muteButton = document.getElementById('video-hud__mute');
var volumeScale = document.getElementById('video-hud__volume');
var speedSelect = document.getElementById('video-hud__speed');
function videoAct() { //Запускаем или ставим на паузу
if(videoPlayer.paused) {
videoPlayer.play();
actionButton.setAttribute('class','video-hud__element video-hud__action video-hud__action_play');
} else {
videoPlayer.pause();
actionButton.setAttribute('class','video-hud__element video-hud__action video-hud__action_pause');
}
if(durationTime.innerHTML == '00:00') {
durationTime.innerHTML = videoTime(videoPlayer.duration); //Об этой функции чуть ниже
}
}

Сначала идет проверка, стоит ли видео на паузе — информация об этом содержится в переменной paused объекта videoPlayer (плеер). Затем используются функции play и pause, чтобы запустить и остановить видео соответственно. Для кнопки указываются классы, чтобы было понятно, в каком состоянии находится ролик. Также длительность ролика записывается в специальное поле.

Чтобы функция работала, нужно перехватывать события нажатий на кнопку и на сам ролик:

//Запуск, пауза
actionButton.addEventListener('click',videoAct);
videoPlayer.addEventListener('click',videoAct);

Теперь, когда ролик можно запустить, пора настроить прогресс-бар. Для этого понадобятся 3 функции: перевод секунд в формат «ММ: СС», отображение текущего времени и перемотка.

function videoTime(time) { //Рассчитываем время в секундах и минутах
time = Math.floor(time);
var minutes = Math.floor(time / 60);
var seconds = Math.floor(time - minutes * 60);
var minutesVal = minutes;
var secondsVal = seconds;
if(minutes < 10) {
minutesVal = '0' + minutes;
}
if(seconds < 10) {
secondsVal = '0' + seconds;
}
return minutesVal + ':' + secondsVal;
}
function videoProgress() { //Отображаем время воспроизведения
progress = (Math.floor(videoPlayer.currentTime) / (Math.floor(videoPlayer.duration) / 100));
progressBar.value = progress;
currTime.innerHTML = videoTime(videoPlayer.currentTime);
}
function videoChangeTime(e) { //Перематываем
var mouseX = Math.floor(e.pageX - progressBar.offsetLeft);
var progress = mouseX / (progressBar.offsetWidth / 100);
videoPlayer.currentTime = videoPlayer.duration * (progress / 100);
}

Первая функция получает секунды и возвращает их в формате «ММ: СС». Вторая функция высчитывает текущее время в процентах от общей длительности и двигает полосу прогресса, а также показывает прогресс в виде минут и секунд. При необходимости можно изменить функцию, чтобы она показывала оставшееся время, — для этого нужно отнять текущий момент от длительности и преобразовать с помощью videoTime. А третья функция на основе положения мыши на полосе рассчитывает, куда нужно перемотать видео, и перематывает его.

Перехватываем события:

//Отображение времени
videoPlayer.addEventListener('timeupdate',videoProgress);
//Перемотка
progressBar.addEventListener('click',videoChangeTime);

На очереди — работа со звуком и скоростью:

function videoChangeVolume() { //Меняем громкость
var volume = volumeScale.value / 100;
videoPlayer.volume = volume;
if(videoPlayer.volume == 0) {
muteButton.setAttribute('class','video-hud__element video-hud__mute video-hud__mute_true');
} else {
muteButton.setAttribute('class','video-hud__element video-hud__mute video-hud__mute_false');
}
}
function videoMute() { //Убираем звук
if(videoPlayer.volume == 0) {
videoPlayer.volume = volumeScale.value / 100;
muteButton.setAttribute('class','video-hud__element video-hud__mute video-hud__mute_false');
} else {
videoPlayer.volume = 0;
muteButton.setAttribute('class','video-hud__element video-hud__mute video-hud__mute_true');
}
}
function videoChangeSpeed() { //Меняем скорость
var speed = speedSelect.value / 100;
videoPlayer.playbackRate = speed;
}

Звук хранится в переменной volume, а скорость — в playbackRate. Меняем их значения в зависимости от выбора пользователя.

//Звук
muteButton.addEventListener('click',videoMute);
volumeScale.addEventListener('change',videoChangeVolume);
//Работа со скоростью
speedSelect.addEventListener('change',videoChangeSpeed);

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

Кроме воспроизведения видео, плеер можно использовать и для добавления звуковых эффектов в интерфейсы:

• звук щелчка при нажатии на кнопку;
• звук перелистывания во время свайпа;
• звук комкания бумаги при удалении записи из базы данных и так далее.

Для этого нужно создать элемент <audio> без атрибута controls, задать ему id и запускать воспроизведение при каком-нибудь событии.

var buttonA = document.getElementsByid('button');
var clickSound = document.getElementById('click-sound');
function buttonClick() {
clickSound.currTime = 0;
clickSound.play();
}
buttonA.addEventListener('click',buttonClick);

Так можно вызывать звук в любое время — главное, чтобы он был коротким, иначе могут быть проблемы, если пользователь быстро кликает по кнопкам. И еще продолжительные звуки сбивают с толку.

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

Также можно сделать удобный плеер для гифок:

<video src='file.gif' preload='none' id='gif-player' class='gif-player gif-player_pause' loop></video>

Немного стилей:

.gif-player {
cursor:pointer;
}
.gif-player_pause {
opacity:0.8;
}

И сам скрипт:

var gifPlayer = document.getElementById('gif-player');
function gifAct() {
if(gifPlayer.paused) {
gifPlayer.play();
gifPlayer.setAttribute('class','gif-player gif-player_play');
} else {
gifPlayer.pause();
gifPlayer.currentTime = 0;
gifPlayer.setAttribute('class','gif-player gif-player_pause');
}
}
gifPlayer.addEventListener('click',gifAct);

Такую гифку можно поставить на паузу, поэтому она не загружает страницу. Также пользователь может вообще не запускать и даже не загружать ее.

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

Создаём видеоплеер для нашего сайта

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

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

Подготовка

Для начала, нам нужно подготовить исходные материалы: видео возьмём с Youtube. Для обеспечения большей совместимости, загрузим видео в двух форматах: MP4 и OGV. Для преобразования видео из одного формата в другой, можем воспользоваться каким-то конвертером.

Также нам понадобится изображение, которое будет отображаться в качестве обложки. Иконки возьмём с Font Awesome. Ну и конечно, нам понадобятся библиотеки jPlayer, jQuery. Поместите все эти файлы в папки:

HTML

Для начала, подключим файлы библиотек и таблицы стилей в разделе <head>:

<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>

HTML структура будет очень похожа на ту, что мы писали при создании аудио плеера:

<div id="jp_container_1" class="jp-video">
    <div class="jp-title">
      <h1>Kelli Anderson - Disruptive Wonder for a Change</h1>
    </div>
    <div class="jp-type-single">
      <div id="jquery_jplayer_1" class="jp-jplayer"></div>
      <div class="jp-gui">
        <div class="jp-video-play">
          <a href="javascript:;" class="jp-video-play-icon" tabindex="1">?</a>
        </div>
        <div class="jp-interface">
          <div class="jp-controls-holder">
            <ul class="jp-controls">
              <li><a href="javascript:;" class="jp-play" tabindex="1">?</a></li>
              <li><a href="javascript:;" class="jp-pause" tabindex="1">?</a></li>
              <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">?</a></li>
              <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">?</a></li>
            </ul>
            <div class="jp-volume-bar">
              <div class="jp-volume-bar-value"></div>
            </div>
            <ul class="jp-toggles">
              <li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">?</a></li>
              <li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">?</a></li>
          </div>
          <div class="jp-progress">
            <div class="jp-seek-bar">
              <div class="jp-play-bar"></div>
            </div>
          </div>
          <div class="jp-current-time"></div>
        </div>
      </div>
      <div class="jp-no-solution">
        <span>Update Required</span>
        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
      </div>
    </div>
</div>

Активируем видео

Тут всё будет так же, как и в предыдущем примере. Только тут, помимо перечисления ссылок на видео, нам нужно указать адрес изображения-постера.

<script>
	$(document).ready(function(){
      $("#jquery_jplayer_1").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", {
            m4v: "vid/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.mp4",
            ogv: "vid/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.ogv",
            poster: "vid/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.png"
          });
        },
        swfPath: "/js",
        supplied: "m4v,ogv"
      });
    });
</script>

На данный момент результат должен выглядеть примерно так:

Добавляем стили

Теперь, давайте добавим css правил, чтобы исправить отображение.

Открываем/создаём файл style.css.

Во-первых, убираем нижнее подчёркивание у всех ссылок:

@font-face {
  font-family: "FontAwesome";
  src: url('fonts/fontawesome-webfont.eot');
  src: url('fonts/fontawesome-webfont.eot?#iefix') format('eot'),
  	   url('fonts/fontawesome-webfont.woff') format('woff'),
  	   url('fonts/fontawesome-webfont.ttf') format('truetype'),
  	   url('fonts/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}
a {
	text-decoration: none;
}

Ширина видео

Задаём определённые размеры контейнеру:

.jp-video {
	margin: 0 auto;
	position: relative;
	font-family: Arial, sans-serif;
}
.jp-video-270p {
	width: 480px;
}

Заголовок

Заголовок окрасим в тёмно-серый цвет, позиционируя его по центру.

.jp-title h1 {
	font-size: 1em;
	text-align: center;
	color: #555;
}

Кнопка проигрывания

Для кнопки проигрывания воспользуемся иконкой из FontAwesome:

.jp-video-play {
	font-family: "FontAwesome";
	position: absolute;
	top: 45%;
	left: 46%;
}
.jp-video-play a {
	font-size: 2em;
	color: rgba(255,255,255,.7);
	display: inline-block;
	width: 50px;
	height: 50px;
	line-height: 55px;
	text-align: center;
	background-color: rgba(0,0,0,.8);
	border-radius: 5px;
}

Интерфейс плеера

Интерфейс видео плеера будет очень похож на интерфейс аудио плеера. Цветовая схема будет та же — оранжевая. Кнопки воспроизведения, паузы и громкости сделаем белыми:

.jp-interface {
	width:100%;
	bottom: 0;
	position: relative;
	background: #f34927;
	background: -moz-linear-gradient(top,  #f34927 0%, #dd3311 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f34927), color-stop(100%,#dd3311));
	background: -webkit-linear-gradient(top,  #f34927 0%,#dd3311 100%);
	background: -o-linear-gradient(top,  #f34927 0%,#dd3311 100%);
	background: -ms-linear-gradient(top,  #f34927 0%,#dd3311 100%);
	background: linear-gradient(to bottom,  #f34927 0%,#dd3311 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f34927', endColorstr='#dd3311',GradientType=0 );
	overflow: hidden;
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1);
	box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1);
}

.jp-interface a {
	color: #fff;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.jp-controls, .jp-toggles {
	padding: 0;
	margin: 0;
	font-family: "FontAwesome"
}
.jp-toggles {
	position: absolute;
	top: 14px;
	right: 14px;
}
.jp-controls li, .jp-toggles li {
	display: inline;
}
.jp-play,.jp-pause {
    width: 55px;
    height: 40px;
    display: inline-block;
    text-align: center;
    line-height: 43px;
}
.jp-mute,.jp-unmute {
    position: absolute;
    right: 85px;
    top: 0;
    width: 20px;
    height: 40px;
    display: inline-block;
    line-height: 43px;
}
.jp-progress {
    background-color: #992E18;
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
    position: absolute;
    left: 55px;
    top: 14px;
    width: 55%;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
}
.jp-play-bar {
    height: 12px;
    background-color: #fff;
    border-radius: 20px 20px 20px 20px;
}
.jp-volume-bar {
    position: absolute;
    right: 40px;
    top: 16px;
    width: 45px;
    height: 8px;
    border-radius: 20px 20px 20px 20px;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
    background-color: #992E18;
    overflow: hidden;
}
.jp-volume-bar-value {
    background-color: #fff;
    height: 8px;
    border-radius: 20px 20px 20px 20px;
}
.jp-current-time {
    color: #FFF;
    font-size: 12px;
    line-height: 14px;
    position: absolute;
    right: 115px;
    top: 13px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

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

Полноэкранный режим

Также у нас есть возможность полно-экранного просмотра. Именно поэтому нам нужно создать стили для кнопок, которые будут применяться в расширенном режиме отображения. С помощью z-index, мы сможем правильно спозиционировать все нужные нам элементы:

.jp-video-full {
	/* правило для IE6 (full-screen) */
	width:480px;
	height:270px;
	/* правило для IE7 (full-screen) */
	position:static !important;
	position:relative;
}

.jp-video-full div div {
	z-index:1000;
}
.jp-video-full .jp-jplayer {
	top: 0;
	left: 0;
	position: fixed !important;
	position: relative; /* правило для IE6 (full-screen) */
	overflow: hidden;
}
.jp-video-full .jp-interface {
	position: absolute !important;
	position: relative; /* правило для IE6 (full-screen) */
	bottom: 0;
	left: 0;
}
.jp-video-full .jp-gui {
	position: fixed !important;
	position: static; /* правило для IE6 (full-screen) */
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	z-index:1001; /* на 1 уровень выше, чем остальные */
}

.jp-video-full .jp-video-play a {
	font-size: 3em;
	height: 80px;
	width: 80px;
	line-height: 95px;
}
.jp-video-full .jp-progress {
	width: 83%;
}

Результат:

Добавляем тени

Этот финт уже не обязателен, однако лишним не будет. Добавим тень к нашему плееру для того, чтоб он выглядел лучше.

.jp-video-270p .jp-type-single {
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

Элемент HTML5 <video> уже поддерживается большинством современных браузеров, и даже IE поддерживает начиная с версии 9. Есть много преимуществ в том, что видео проигрывается в самом браузере без использования плееров сторонних производителей (см. статью Введение в HTML5 video Брюса Лоусона), поэтому многие разработчики пытаются начать использовать эту возможность как можно скорее. Но есть несколько препятствий к этому,  в первую очередь, это проблемы с поддержкой  кодеков в каждом браузере, тут разногласия между Opera / Firefox и IE / Safari. Но это не может быть серьезной проблемой в течение длительного времени, Google не так давно выпустил кодек VP8, и Opera, Firefox, Chrome и IE9 уже имеют поддержку этого формата, да и Flash также может проигрывать VP8. Это означает, что в скором времени мы сможем создать единую версию видео, которое будет проигрываться при помощи тега <video> в большинстве браузеров и Flash Player.

Другим серьезным препятствием для использования является создание пользовательского HTML5 <video> плеера — это то, где flash на данный момент единственное решение и в настоящее время имеет преимущество, с мощным IDE, Flash обеспечивает простой интерфейс для создания пользовательского компонента видеоплеера. Если мы хотим создать собственный плеер для элемента HTML5 <video>, то мы должны писать все это на HTML5, CSS3, JavaScript и т.д.

И это то, о чем будет статья. Мы рассмотрим как создать легкий пользовательский HTML5 <video> плеер, включая создание для этого простого плагина jQuery, выбор элементов управления и настройка внешнего вида при помощи CSS.

В этой статье мы рассмотрим:

• Элементы управления видео
• Основы разметки элементов управления
• Создание плагина JQuery
• Внешний вид плеера
• Создание тем для плеера

Мы будем использовать jQuery для упрощения манипуляций DOM, и jQuery UI для создания ползунков управления, которые мы будем использовать для перемотки видео и изменения уровня громкости.

Элементы управления видео

Как профессиональные веб-дизайнеры, мы хотим создать видеоплеер, который будет выглядеть одинаково во всех браузерах. Однако, каждый браузер предоставляет свой собственный, по разному выглядящий, видео плеер, от минималистичного в Firefox и Chrome, до более навороченного в Opera и Safari (см. рисунок 1). Если мы хотим, чтобы наши элементы управления выглядели одинаково во всех браузерах, а также соответствовали нашему дизайну, мы должны создать наши собственные элементы управления с нуля. Это не так сложно, как кажется.

Рисунок 1. Встроенные элементы управления видео в различных браузерах

Все медиа-элементы в HTML5 имеют поддержку API медиа-элементов , к которому мы можем получить доступ при помощи  JavaScript и использовать для создания таких функций, как воспроизведение, пауза и т.д.  Элементы управления мы можем создать с помощью HTML, CSS, SVG.

Основная разметка элементов управления

Во-первых, нам нужно создать собственно саму разметку для элементов управления. Нам нужна кнопка Play/Pause, панель поиска, таймер и регулятор громкости. Мы вставим разметку для элементов управления после элемента <video>, и обернем их в блок с классом ghinda-video-controls.

<div class=«ghinda-video-controls»>
 <a class=«ghinda-video-play» title=«Play/Pause»></a>
 <div class=«ghinda-video-seek»></div>
 <div class=«ghinda-video-timer»>00:00</div>
 <div class=«ghinda-volume-box»>
 <div class=«ghinda-volume-slider»></div>
 <a class=«ghinda-volume-button» title=«Mute/Unmute»></a>
 </div>
</div>

Мы использовали классы вместо ID для всех элементов, чтобы иметь возможность использовать этот же код для нескольких видео-плееров на одной странице.

Создание плагина jQuery для плеера

После создания разметки, мы будет связывать наши элементы с API медиа-элементами, для того, чтобы управлять нашим видео. Как было отмечено выше, для этого мы напишем плагин jQuery.

Примечание автора: Я надеюсь, что вы знакомы с основами JQuery и JavaScript, поэтому я лишь вкратце объясню сценарий. Если вам нужна дополнительная информация по этим вопросам, см. Craig Buckler How to develop a jQuery plugin, и раздел  JavaScript section of the Opera web standards curriculum.

Здесь мы используем jQuery для создания динамически разметки видеоплеера (но не сам проигрыватель), а также удаляем атрибут controls как только скрипт загружается. Это для того, что в случае, если пользователь отключил JavaScript, эти элементы управления будут бесполезны, и он/она не сможет воспользоваться нативными элементами управления браузера для элемента видео. Плеер будет использовать наши пользовательские элементы управления только после того,  как скрипт успешно загрузился.

Далее, нам нужно создать переменные для каждого элемента управления.

Мы получаем каждый элемент управления по его классу, а затем их скрываем пока все не будет готово.

Теперь для управления Play/Pause:

Мы также добавляем и удаляем классы из наших кнопкок, чтобы изменить внешний вид, в зависимости от состояния видео (воспроизведение или пауза).

Для создания ползунка поиска мы будем использовать jQuery UI Slider component.

Как видите, мы используем рекурсивную функцию, при чтении ReadyState видео. Мы должны продолжать запрашивать видео, пока оно не готово, иначе мы не сможем определить продолжительность, и не сможем создать ползунок. Как только видео будет готово, мы инициализируем ползунок, а также отображаем элементы управления.

Далее мы создадим таймер.

Здесь мы используем функцию seekUpdate, чтобы получить атрибут CurrentTime видео и функцию gTimeFormat для форматирования полученного текущего значения.

Для регулировки громкости, мы будем также использовать jQuery UI slider и пользовательскую функцию для кнопки регулировки громкости видео.

Наконец, мы собираемся удалить атрибут controls из <video>, потому что к этому моменту наши собственные пользовательские элементы управления настроены и мы хотим использовать их вместо используемых в браузере по умолчанию.

$gVideo.removeAttr(‘controls’);

Теперь, когда наш плагин готов, мы можем вызвать его для элемента video.

$(‘video’).gVideo();

Этот код вызовет плагин для всех видео-элементов на странице.

Внешний вид

А теперь самое интересное, внешний вид видео плеера. Как только плагин будет готов, настройка элементов управления очень проста при помощи CSS.

Как вы уже заметили, мы еще не добавили стили для элементов управления и для этого мы будем использовать CSS3.

Во-первых, мы добавим несколько стилей для основного контейнера видеоплеера.

Мы указали float:left, чтобы не допустить его растягивания на всю ширину плеера, и чтобы ширина его была равна фактической ширине элемента видео.

Далее мы выстроим все элементы управления влево. Мы будем использовать opacity и transitions для Play/Pause и кнопки регулировки звука, чтобы создать симпатичный эффект при наведении курсора.

Я уверен, что вы внимательно прочитали первую часть статьи о JavaScript, и помните, что мы добавляли и удаляли классы для кнопки Play/Pause в зависимости от состояния видео (воспроизведение или пауза). Вот почему класс ghida-paused-button переопределяет свойство background класса ghinda-video-play.

Теперь бегунки. Как мы говорили раньше, мы используем jQuery UI slider для перемотки видео и регулировки уровня громкости. Этот компонент имеет свои собственные стили, определенные в jQuery UI stylesheet, но мы будем полностью переопределять их, для того, чтобы он соответствовал дизайну плеера.

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

Когда курсор мыши наводится на кнопку регулировки громкости, её высота увеличивается при помощи transitions.

С базовыми знаниями CSS и некоторыми новыми свойствами CSS3, мы уже создали удобный интерфейс для нашего плеера, внешний вид его можно увидеть на рисунке 2:

Рисунок 2: Наш готовый видеоплеер.

Создание тем для плеера

Как вы могли заметить, при создании плагина jQuery, мы определили набор опций по умолчанию. Эти опции theme и childtheme, они могут быть изменены при вызове плагина, что позволяет нам с легкостью применять пользовательские темы.

Тема представляет собой совершенно новый свод правил CSS для каждого плеера. childtheme представляет собой набор правил CSS, который опирается на правила существующей темы, и добавляет или перезаписывает стили «родительской» темы.

Мы можем указать оба варианта или только один, при вызове jQuery плагина.

$(‘video’).gVideo({
 childtheme:‘smalldark’
});

В приведенном выше примере мы вызываем плагин с темой smalldark. Сначала будет применяться родительская дефолтовая тема, а затем применится дочерняя тема поверх её, переопределив некоторую часть правил, установленных в родительской теме. См. рисунок 3 для темы Smalldark.

Рисунок 3: Тема Smalldark в действии.

Вы можете проверить то что у нас получилось в действии, или скачать исходный код (8.5MB, ZIP-файл) и экспериментировать с ним дальше.

Заключение

Создание собственного видеоплеера с HTML5, JavaScript и CSS 3 довольно легко. JavaScript используется только для создания функциональности элементов управления, а CSS3 за все, что включает в себя внешний вид плеера. В результате мы получаем мощное, легко настраиваемое, решение.

Перевод

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом