Новости
- Підводні камені і перші труднощі
- Початок роботи
- Динамічне змінити якість зображення
- підключення субтитрів
- Preview thumbnails при перемотуванні
- Перехід в повноекранний режим
- інший функціонал
- перемикання аудіодоріжок
- Отримання скриншота програється відео
- ефекти
- HTML5 vs Flash
- Приклад реалізації відео плеєра
- висновки
- Корисні посилання
This post is also available in: англійська
З кожним роком медіа технології все більше http://tutbelgorod.ru/ і більше входять в життя кожної людини. Глобальна мережа також схильна до цієї тенденції, про що свідчать успіх і популярність таких сервісів як YouTube. Але робота подібних систем неможлива без технологій, що дозволяють реалізувати відтворення відео контенту для користувача.
Класичним підходом для реалізації програвача відео є використання технології Flash. Мабуть, складно знайти більш поширений плагін для веб-браузера, ніж Flash Player. Однак варто зауважити, що слабким місцем подібного підходу є необхідність установки Flash plugin'а. А для багатьох пристроїв він взагалі відсутній. Наприклад, настільки популярні iPhone і iPad не мають можливості запускати Flash-додатки в браузері. Виходом з подібної ситуації є використання HTML5.
Даний сучасний стандарт мови HTML приніс безліч нововведень. Але ключовим для нас є можливість відтворення відео стандартними засобами веб-браузера. Для цього в специфікацію HTML5 введений тег <video>. Все, що Вам потрібно для простого відтворення відео файлу - лише використовувати даний тег, правильно поставивши значення його атрибутів:
- Autoplay - при наявності даного атрибута зі значенням 'autoplay' відтворення почнеться відразу після того, як завантажитися достатні обсяг відео.
- Controls - значення даного атрибута, рівне 'controls' відобразить елементи управління відтворенням.
- Height - висота програвача в пікселах.
- Loop - даний атрибут, встановлений в значення 'loop' змусить відтворення відео циклічно повторюватись по закінченню.
- Muted - при значенні 'muted' відключить звук у відео файлу.
- Poster - даний атрибут приймає url зображення, яке буде відображатися до початку відтворення контенту.
- Preload - атрибут визначає стратегію браузера по завантаженню відео контенту. Може набувати різних значень:
- 'Auto' - якщо завантаження відео повинна початися при завантаженні сторінки.
- 'Metadata' - якщо з завантаженням сторінки повинні завантажитися лише метадані контенту.
- 'None' - якщо при завантаженні сторінки не повинна починатися завантаження відео.
- Src - даний атрибут містить url файлу з відео контентом.
- Width - містить значення висоти програвача.
Підводні камені і перші труднощі
На жаль не все так просто. HTML5 - досить молодий стандарт. Так що перше, що варто відзначити - обмежену підтримку браузерами. Використання тега <video> можливо в браузерах наступних версій:
- IE 9 +
- Firefox 4.0+
- Chrome 6+
- Safari 5+
- Opera 10.6+
Також варто зауважити, що різні браузери відтворюють різні формати відео, тобто необхідно підготувати один і той же контент в різних форматах для різних браузерів. Нижче в таблиці вказані основні браузери з підтримкою ними форматів:
Браузер Формати Ogg Theora H.264 VP8 (WebM) Internet Explorer Вимагає установки розширення 9.0 Вимагає установки розширення Mozilla Firefox 3.5 Немає 4.0 Google Chrome 3.0 Так 6.0 Safari Вимагає установки розширення 3.1 Вимагає установки розширення Opera 10.50 Ні 10.60Існує механізм для кросбраузерності відтворення. Він полягає в додаванні всередину <video> тегів <source>, що вказують на однаковий контент в різних форматах. В такому випадку браузер визначить перший доступний для програвання відео файл і завантажить його в програвач. Приклад реалізації нижче:
<Video> <source src = "path_to_ogg_file" type = "video / ogg" /> <source src = "path_to_mp4_file" type = "video / mp4" /> <source src = "path_to_webm_file" type = "video / webm" / > </ video>Зверніть увагу, що в різних браузерах елементи управління відтворенням будуть виглядати по-різному. Тому для уніфікації необхідно розробляти власний інтерфейс програвача. Ідея дуже проста: елементи управління являють собою div'и, позиційований поверх контейнера з відео.
Варто зауважити, що різні браузери можуть мати різну поведінку при роботі з HTML5 video. Наприклад на iOS пристроях неможливий автостарт відтворення.
Також відсутня можливість якимось любо чином управляти розміром відео буфера. Визначити розмір файлу, що теж не вийде, так само як і швидкість завантаження.
Початок роботи
У стандарті HTML5 у елементів мультимедіа існує потужний API, який дозволяє не тільки розробити єдиний інтерфейс програвача, а й реалізувати додатковий функціонал. Як інструмент для роботи з HTML5 Media API виступає JavaScript.
Припустимо на сторінці існує наступний контейнер з відео:
<Video id = "player" src = "some_path_to_video_file" width = 640 height = 480> </ video>Для початку роботи з програвачем через API необхідно визначити об'єкт, що містить контейнер з медіа-вмістом. Для цього використовуємо JQuery селектор:
var player = $ ( '# player') [0];Все, тепер ми готові управляти нашим плеєром через JS! Для початку відтворення файлу і для паузи досить виконати наступний код відповідно:
player.start (); player.pause ();HTML5 Media API дозволяє отримати інформацію про програється відео. Наприклад можна виробляти все маніпуляції з програють контентом працюючи з полем 'currentSrc':
var currentSource = player.currentSrc; // отримуємо url програється // контенту player.currentSrc = 'path_to_new_media_source'; // замінюємо контент // в програвачіАналогічно йде робота з функцією перемотування відео. Даний функціонал реалізовується через поле 'currentTime' (приймає знaченіе типу float, означає поточний час відтворення в секундах):
var currentTime = player.currentTime; // поточне значення часу // відтворення player.currentTime = 60 // перемотування на позицію 1 хвилиниОтримати тривалість файлу, можна звернувшись до полю 'duration'. А разом із значенням поточного часу програвання нескладно вирахувати відсоток переглянутого контенту:
var duration = player.duration; // тривалість контенту в секундах var proportion = currentTime / duration; // співвідношення часу // відтворення до // тривалості відео.Існує можливість регулювання гучності відтворення через поле 'volume':
player.volume = 1; // включаємо повну гучність (для виключення // звуку полю потрібно присвоїти значення "0")На цьому можливості HTML5 Media API не закінчуються. Реалізації складних елементів управління може бути здійснена через механізм подій. Для цього досить використовувати функцію addEventListenter (). Наприклад, для підписки на подію закінчення відтворення досить виконати наступне:
var onEndFunc = function () {// функція, що викликається при закінченні // відтворення // якісь дії} player.addEventListener ( 'ended', onEndFunc); // підписуємо функцію // на закінчення відео player.removeEventListener ( 'ended', onEndFunc); // відписувався функції // від закінчення відеоНижче представлені всі події, що існують в HTML5 Media API.
- o nabort - подія аварійного завершення програвання
- oncanplay - подія готовності до відтворення відео після завантаження достатньої частини в буффер
- oncanplaythrough - подія готовності до відтворення після повного завантаження контенту в буффер
- ondurationchange - подія зміни тривалості контенту
- onemptied - подія, що викликається при розриві з'єднання
- onended - подія закінчення відтворення
- onerror - подія помилки при завантаженні файлу контенту
- onloadeddata - подія завантаження контенту
- onloadedmetadata - подія завантаження метаданих.
- o nloadstart - подія початку завантаження файлу
- onpause - подія зупинки відтворення
- onplay - подія початку відтворення
- onplaying - подія відтворення (буде виконуватися, поки відео не зупиниться)
- onprogress - подія процесу завантаження відео (буде виконуватися, поки не буде завантажений весь контент)
- onratechange - подія зміни швидкості відтворення
- onreadystatechange - подія зміни стану готовності відео програвача
- onseeked - подія закінчення перемотування відео
- onseeking - подія, що викликається при перемотуванні контенту
- onstalled - собтіе, що викликається при неможливості браузером отримати контент
- onsuspend - подія, що викликається при зупинці завантаження контенту.
- o ntimeupdate - подія, що викликається при зміні поточного становища відтворення
- onvolumechange - подія зміни гучності звуку
- onwaiting - подія зупинки відтворення для буферизації даних
За допомогою даних подій можна реалізовувати такі елементи відео плеєра, як плейлисти, відображення субтитрів, показ цільового кадру при перемотуванні і багато інших.
Динамічне змінити якість зображення
Як було сказано вище, в HTML5 відсутня інструмент для роботи з розміром буфера, однак Media API дозволяє дізнатися тривалість буферизує частини контенту, що необхідно для відображення на смузі перемотування частини, доступною до перегляду. Для цього досить виконати наступний код:
var bufferedTime = player.buffered.end (0); // часова межа // буферизує частиниА тепер найцікавіше! Знаючи тривалість контенту в буфері можна реалізувати динамічне визначення якості програється контенту. Для цього потрібно реалізувати метод, який буде оцінювати швидкість завантаження інформації в буфер і в залежності її значення перемикати якість відео.
Ідея аналізу полягає в наступному: ми розраховуємо швидкість наростання буфера, і якщо вона нижче, ніж швидкість відтворення, то проводимо розрахунок часу до повної буферизації контенту і порівнюємо його з часом, що залишився відтворення. Якщо час буферизації з розрахованої швидкістю більше відстав часу програвання, то перемикаємо контент на більш низьку якість.
var bufferAnalizer = function (playbackStartPoint, playbackEndPoint, bufferStartPoint, bufferEndPoint, duration) {var oldQualityObj = this.qualityObj, playbackStart = 0, // new playback start point bufferStart = 0; // new buffer start point if (oldQualityObj) {playbackStart = oldQualityObj.playbackEndPoint; bufferStart = oldQualityObj.bufferEndPoint; } Else {playbackStart = playbackStartPoint; bufferStart = bufferStartPoint; } This.qualityObj = { 'playbackEndPoint': playbackEndPoint, 'bufferEndPoint': bufferEndPoint, 'deltaBuffer': bufferEndPoint - bufferStart, // скільки забуферізовано 'bufferSpeed': (bufferEndPoint - bufferStart) / (playbackEndPoint - playbackStart), 'deltaPlayback': playbackEndPoint - playbackStart, // скільки було // відтворено 'availTime': bufferEndPoint - playbackEndPoint // різниця між буффер і // позицією відтворення} var restTime = duration - playbackEndPoint, bufferTime = (duration - bufferEndPoint) / this.qualityObj.bufferSpeed; if ((bufferTime> restTime) && ((this.qualityObj.availTime / this.qualityObj.deltaPlayback) <2)) {if (this.quality == 'normal') {this.quality = 'low'; }}}підключення субтитрів
У стандарті HTML5 існує спеціальний тег <track> для відображення субтитрів, проте жоден популярний браузер на час написання статті не підтримує його. Проте можна реалізувати даний функціонал руками. Нехай субтитри знаходяться в файлі 'subs.srt'. Для початку підключимо його і занесемо вміст в спеціальний об'єкт:
var toSeconds = function (time) {var seconds = 0,0; if (time) {var p = time.split ( ':'); for (var i = 0; i <p.length; i ++) seconds = seconds * 60 + parseFloat (p [i] .replace ( ',', '.'))} return seconds; } $ .Get (subsSrc, function (data) {data = data.replace (/ \ r \ n \ r \ n / g, "") .split ( ''); for (var item in data) {var subItem = data [item] .split (/ \ r \ n / g); if (subItem.length> 3) {for (var i = 3; i <subItem.length; i ++) {subItem [2] + = '< br /> '+ subItem [i];}} var time = subItem [1] .split (' -> '); self.subs.push ({id: subItem [0], sTime: self.toSeconds (time [0]), eTime: self.toSeconds (time [1]), text: subItem [2]});}}, 'html');Тепер залишилося створити таймер, який буде в залежності від поточного часу відображати потрібні субтитри в div'е з класом '.subs':
var self = this, lastSub = 'empty', currentSub; this.subsTimer = setInterval (function () {for (var item in self.subs) {var currentTime = self.player.currentTime; if ((self.subs [item] .eTime> currentTime) && (self.subs [item ] .sTime <= currentTime)) {currentSub = self.subs [item] .text;} else if ((self.subs [item] .eTime <currentTime)) {// no subs now currentSub = '';}} if (currentSub && (currentSub! = lastSub)) {self.container.find ( '. subs'). html (currentSub); lastSub = currentSub;}}, 500);Preview thumbnails при перемотуванні
Навряд чи знайдеться людина, яка не оцінив зручність відображення кадру для переміщення під час перемотування. Реалізація даного функціоналу не є складним завданням. Для створення preview необхідно поверх основного контейнера з відео створити новий меншого розміру з тим же відео контентом і спозиционировать його точно над курсором:
self.container.find ( '. controls'). append ( '<video class = "thumb" src = "' + self.player.currentSrc + '"> </ video>');А після перемотувати в даному контейнері відео:
var self = this; $ ( '. Seekbar) .bind (' mousemove ', function (e) {self.cursorX = e.pageX; self.seek (self);}); this.scale = this. container .find ( '. seekbar'). width () / player.duration; var seek = function (context) {$ ( '. thumb') [0] .currentTime = (self.cursorX - self.container.find ( '. seekbar'). offset (). left) / self.scale; }Перехід в повноекранний режим
У браузерах Firefox, Safari і Chrome існує спеціальний API для роботи режимом повноекранного відображення. Механізм дозволяє відобразити обраний div на весь екран. Функції, які виконують дані дії в цих браузерах названі по-різному, так що Вам доведеться реалізувати виклик обох.
var element = document.getElementById ( 'player_container'); if (element.mozRequestFullScreen) {element.mozRequestFullScreen (); // Розвертаємо для Firefox} else if (element.webkitRequestFullScreen) {element.width ( '100%'); element.height ( '100%'); element.webkitRequestFullScreen (); // Розвертаємо для Chrome і Safari}Зверніть увагу, що для Chrome і Safari крім перекладу контейнера в повний екран реалізовано необхідно привласнити його висоті і ширині значення 100%. Це пов'язано з тим, що виклик методу webkitRequestFullScreen () лише затемнити весь екран і розташує по його центру цільової контейнер. Масштабування контейнера цілком і повністю перекладено на сторону розробника.
Факт розгортання на повний екран контейнера моно визначити станом полів document.mozFullScreenElement для Firefox і document.webkitIsFullScreen для браузерів на WebKit.
Переклад контейнера назад в режим нормального відображення возможеy функціями скасування.
// Визначаємо факт повноекранного отбраженія будь-якого контейнера. if (document.mozFullScreenElement || document.webkitIsFullScreen) {if (document.mozCancelFullScreen) {document.mozCancelFullScreen (); // Звертаємо для Mozilla} else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen (); // Звертаємо для Chrome і Safari}}FullScreen API також реалізує події зміни стану відображення - 'mozfullscreenchange' і 'webkitfullscreenchange' відповідно. Вище було вказано, що масштабування контейнера в WebKit лежить на розробнику, відповідно при поверненні до нормального відображення також потрібно змінити розміри контейнера з плеєром:
document.addEventListener ( 'webkitfullscreenchange', this.WebkitFullscreenEvent = function () {if (! document.webkitIsFullScreen) {self.container.width (width); self.container.height (height);}});інший функціонал
Визначення розміру завантаження.
Як вже було сказано, у розробника відсутня можливість визначити розмір відео файлу засобами HTML5. Однак ніхто не заборонить отримувати його розмір від бекенда або при формуванні списку відтворення, або при отриманні адреси файлу, або через звернення до спеціального методу.
перемикання аудіодоріжок
На даний момент відсутня реалізація перемикання аудіо доріжок. Звичайно, можна створити на сторінці кілька аудіо плеєрів з доріжками, проте в такому випадку синхронізація програвання відео і потрібного аудіо є вкрай нетривіальним завданням.
Отримання скриншота програється відео
Якщо Вам потрібно знімати скріншот відео, то про реалізацію цього з використанням <canvas> можна прочитати тут .
ефекти
Приємною особливістю HTML5 Video є те, що до програвача можуть бути застосовані будь-які ефекти, трансформації і маски, здійсненні через CSS3. Приклад подібного функціоналу можна подивитися тут .
HTML5 vs Flash
Існує поширена думка, що HTML5 Video є своєрідним «вбивцею» Flash, тому що пропонує схожий функціонал. На ділі все звичайно не зовсім так. Для розгортання преміум відео сервісів HTML5 не підходить, тому що не підтримує такі важливі особливості:
- Потокове відео. HTML5 підходить лише для відтворення відео файлів.
- Захист контенту. У той же час Flash надає можливість використання захисних технологій.
- Єдиний API і його реалізація для всіх браузерів.
- Стандартний формат відео. Різні браузери = різні формати відео для HTML5 плеєра.
Правда варто зауважити, що роботи по розширенню можливостей HTML5 Video до функціоналу Flash вже ведуться. В першу чергу така ініціатива йде від пошукового гіганта Google - докладніше можна прочитати в доповіді про виступ представника компанії на конференції Streaming Media .
Приклад реалізації відео плеєра
Перейти на сторінку з відеоплеєром .
висновки
Поява HTML5 принесло нам новий інструмент для доставки відео контенту користувачеві. Однак на даний момент на увазі новизни стандарту існує ряд випадків, коли необхідне застосування Flash-технології. Рішення про те, який механізм використовувати цілком і повністю повинен залежати від цілей і потреб сервісу.
Корисні посилання
PS
Найближчим часом чекайте статтю про аналітику програється HTML5 Video.