Ранее мы обсуждали общие вопросы использования HTML5 аудио и видео и начал погружаться в детали, начиная с задачи определения Поддержка браузером необходимого кодека .
Сегодня мы рассмотрим задачу создания собственного видеоплеера с использованием HTML5 Video. 
Напомню, что сам элемент видео уже предоставляет необходимый набор элементов управления воспроизведением.
Чтобы сделать панель управления воспроизведением видимой, достаточно указать атрибут элементы управления .
Однако, как я отметил во вступительной статье, со стандартными элементами управления есть проблема, заключающаяся как раз в том, что они выглядят нестандартно.<video src="trailer_480p.mp4" width="480" height="270" poster="poster.gif" controls />
Другими словами, в каждом браузере они выглядят по-разному (проверить, как выглядят элементы управления в разных браузерах, можно на примере Поддержка видеоформатов на ietestdrive.com - просто откройте его в двух-трех разных браузерах).
API для управления воспроизведением
стандарт HTML5 для работы с видео в DOM вводится новый интерфейс — HTMLVideoElement, который, в свою очередь, наследует интерфейс HTMLMediaElement.Интерфейс HTMLMediaElement
Это общий интерфейс для обоих медиа-элементов (аудио и видео), описывающий доступ к основным возможностям работы с медиа-контентом: управление источником контента, управление воспроизведением, изменение уровня звука и обработка ошибок.Основные свойства и методы, которые нам понадобятся: Состояние сети и готовность к работе источник — ссылка (url) на воспроизводимый контент буферизованный - буферизованные части видео Воспроизведение и управление Текущее время — текущий момент воспроизведения (сек.
) продолжительность — продолжительность медиаконтента (сек.
) остановился — воспроизведение приостановлено? закончился — воспроизведение закончилось? приглушенный — звук вкл/выкл объем — уровень звука [0, 1] играть() - начать играть Пауза() - Пауза События онканплей - вы можете начать играть ontimeupdate — изменена позиция воспроизведения онплей - началось воспроизведение пауза — нажата пауза закончился - воспроизведение закончилось
Важно: это не все методы и свойства, предоставляемые через интерфейс HTMLMediaElement.
Интерфейс HTMLVideoElement
Видео отличается от аудио по нескольким дополнительным признакам: ширина И высота — ширина и высота контейнера для воспроизведения видео; ширина видео И видеоВысота — внутреннее значение ширины и высоты видео, если размеры неизвестны, равны 0; плакат — ссылка на картинку, которую можно показывать, пока видео недоступно (обычно это одна с первых непустых кадров).Разница между шириной/высотой и videoWidth/videoHeight в том, что последние являются собственными характеристиками видео, в частности с учетом соотношения сторон и других характеристик, тогда как видеоконтейнер может быть любого размера (больше, меньше, с другим соотношением сторон).
соотношение ).
Воспроизведение и пауза
Создание собственного видеоплеера мы начнем с простой задачи: научимся запускать воспроизведение видео и останавливать его.Для этого нам понадобятся методы play() и пауза() и несколько свойств, описывающих текущее состояние видеопотока (также мы будем использовать библиотеку jQuery, не забудьте ее подключить).
Прежде всего, нам нужен видеоэлемент, которым мы хотим управлять, и элемент, по которому можно щелкнуть, чтобы контролировать текущее состояние: <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;
}
Обратите внимание на инверсию состояния кнопки (пауза) и действия (воспроизведение).
Теперь нам нужно добавить немного js-кода, чтобы нажатие на кнопку воспроизведения переключало ее состояние и соответственно запускало видеоклип или ставило его на паузу: $(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 для кнопок управления и их различных состояний и.
… казалось бы, уже все отлично работает, но это не так! Есть еще несколько мелочей, которые нам также необходимо принять во внимание.
Играю первым
Сначала нам нужно правильно обработать конец видеоклипа (если, конечно, он не зациклен), и в этот момент нужно переключить кнопки управления так, чтобы вместо состояния «пауза» было «воспроизведение».
состояние: video.addEventListener("ended", function() {
video.pause();
controls.playpause.text("Play");
controls.playpause.toggleClass("paused");
});
Контекстное меню
Во-вторых, в браузеры обычно добавляют возможность управления воспроизведением через контекстное меню.Это означает, что пользователь, вообще говоря, может что-то изменить в обход нашего контроля.
Этот момент тоже нужно уловить и внести необходимые изменения во внешний вид элементов управления.
Для этого достаточно подписаться на события онплей И пауза .
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;
}
И несколько ссылок на соответствующие элементы для быстрого доступа к объекту управления: var controls = {
.
total: $("#total"), buffered: $("#buffered"), progress: $("#current"), duration: $("#duration"), currentTime: $("#currenttime"), hasHours: false, .
};
Прежде всего нам нужно понять, какова продолжительность видео — для этого у элемента video есть свойство продолжительность .
Отследить это значение можно, например, в момент готовности видео к воспроизведению – по событию.
онканплей : 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 , а также быть бесконечным — например, при потоковой передаче радио).
Мы также используем специальную функцию формат времени для преобразования секунд в формат ЧЧ:мм:сс или мм:сс: 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);
Свойство Текущее время отображает текущее время в секундах.
Его также можно использовать для изменения времени воспроизведения: 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);
Важный нюанс относительно объекта недвижимости.
буферизованный Следует иметь в виду, что он предоставляет не только время в секундах, но и временные интервалы в форме объекта TimaRanges. В большинстве случаев будет только один диапазон с индексом 0, начиная с 0c. Однако если браузер использует HTTP-запросы диапазона к серверу, например, в ответ на попытки перехода к другим фрагментам видеопотока, может возникнуть несколько пробелов.
Также следует учитывать, что в зависимости от реализации браузер может удалять из буфера памяти уже воспроизведенные части видео.
Промежуточный результат: 
Звук
Напоследок добавим нашему видеоплееру еще одну мелочь – возможность включать и выключать звук.
Для этого добавим небольшой элемент управления с динамиком (иконка SVG взята с сайта Проект существительного ): <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"
Теги: #Разработка сайтов #видео #HTML #html5 #видеоплеер #html5 видео #видеоплеер
-
Выставка Металлообработка 2017
19 Oct, 24 -
Подружить Sql-Сервер И Perfmon
19 Oct, 24 -
Собеседование На Пенсию Программиста
19 Oct, 24 -
Лучший Сотрудник Месяца
19 Oct, 24 -
Бодо Шефер И Кофе
19 Oct, 24
