Html сделать свой видеоплеер

Как сделать собственный видео-плеер на HTML5 Video

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

Напомню, что video-элемент сам по себе уже обеспечивает необходимый набор контролов для управления проигрыванием. Чтобы была видна панель управления воспроизведением, достаточно указать атрибут 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-элемент, которым мы хотим управлять, и элемент на который можно нажимать для управления текущим состоянием:

Обратите внимание на инвертирование состояния кнопки (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(); >);

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

Прогресс

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

#progress < width:290px; >#total < width:100%; background:#999; >#buffered < background:#ccc; >#current < background:#eee; line-height:0; height:10px; >#time

Первым делом, нам нужно понять, какова длительность ролика — для этого у 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):

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

Для переключения состояния динамика нам понадобится свойство 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.

video.addEventListener("canplay", function() < . >, false);

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

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

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

Источник

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

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

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

Подготовка

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

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

HTML

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

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

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

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

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

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

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

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

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

Ширина видео

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

Заголовок

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

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

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

.jp-video-play < font-family: "FontAwesome"; position: absolute; top: 45%; left: 46%; >.jp-video-play a

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

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

.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

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

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

Также у нас есть возможность полно-экранного просмотра. Именно поэтому нам нужно создать стили для кнопок, которые будут применяться в расширенном режиме отображения. С помощью 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

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

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.hongkiat.com/blog/web-video-player/
Перевел: Станислав Протасевич
Урок создан: 1 Мая 2013
Просмотров: 53491
Правила перепечатки

5 последних уроков рубрики «jQuery»

• 

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Источник