І більше входять у життя кожної людини. Глобальна мережа також схильна до цієї тенденції, про що свідчать успіх і популярність таких сервісів як YouTube. Але робота подібних систем неможлива без технологій, які дають змогу реалізувати відтворення відео контенту для користувача.

Класичним підходом для реалізації відеоплеєра є використання технології Flash. Мабуть, складно знайти більш поширений плагін для веб-браузера, ніж Flash Player. Однак варто зауважити, що слабким місцем такого підходу є необхідність установки Flash plugin'а. А для багатьох пристроїв він взагалі відсутній. Наприклад, настільки популярні iPhone та iPad не мають можливості запускати Flash-програми у браузері. Виходом із такої ситуації є використання HTML5.

Цей сучасний стандарт мови HTMLприніс безліч нововведень. Але ключовим для нас є можливість відтворення відео стандартними засобамивеб-браузер. Для цього у специфікацію HTML5 введено тег

• Autoplay- За наявності даного атрибуту зі значенням ' autoplay’відтворення почнеться відразу після того, як завантажитися достатні обсяг відео.
• Controls– значення даного атрибуту, що дорівнює ‘ controls’відобразить елементи керування відтворенням.
• Height- Висота програвача в пікселах.
• Loop – даний атрибут, встановлений значення ‘ loop’змусить відтворення відео циклічно повторюватися після закінчення.
• Muted- При значенні ‘ muted’відключить звук у відео файлу.
• Poster– цей атрибут приймає url зображення, яке відображатиметься до початку відтворення контенту.
• Preload– атрибут визначає стратегію браузера із завантаження відео контенту. Може приймати різні значення:
  • ‘Auto’— якщо завантаження відео почнеться під час завантаження сторінки.
  • ‘Metadata’– якщо із завантаженням сторінки повинні завантажитись лише метадані контенту.
  • ‘None’– якщо під час завантаження сторінки не почнеться завантаження відео.
• Src- Цей атрибут містить url файлу з відео контентом.
• Width- Містить значення висоти програвача.

Підводні камені та перші труднощі

На жаль, не все так просто. HTML5 – досить молодий стандарт. Тож перше, що варто відзначити – обмежену підтримку браузерами. Використання тега

• IE 9+
• Firefox 4.0+
• Chrome 6+
• Safari 5+
• Opera 10.6+

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

Існує механізм для кроссбраузерного відтворення. Він полягає у додаванні всередину

Зверніть увагу, що в різних браузерах елементи керування відтворенням виглядатимуть по-різному. Тому для уніфікації необхідно розробляти власний інтерфейс програвача. Ідея вкрай проста: елементи управління являють собою div'и, спозиційовані поверх контейнера з відео.

Варто зауважити, що різні браузериможуть мати різну поведінку під час роботи з HTML5 video. Наприклад наiOS пристроях неможливий автостарт відтворення.

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

Початок роботи

У стандарті HTML5 елементи мультимедіа мають потужний API, що дозволяє не тільки розробити єдиний інтерфейс програвача, але й реалізувати додатковий функціонал. Як інструмент для роботи з HTML5 Media API виступає JavaScript.

Допустимо на сторінці існує наступний контейнер з відео:

Для початку роботи з програвачем через API необхідно визначити об'єкт, що містить контейнер із медіа-вмістом. Для цього використовуємо JQuery селектор:

Var player = $('#player');

Все тепер ми готові керувати нашим плеєром через JS! Для початку відтворення файлу та для паузи достатньо виконати наступний код відповідно:

Player.start(); player.pause();

HTML5 Media API дозволяє отримати інформацію про відео, що програється. Наприклад можна проводити всі маніпуляції з контентом, що програється працюючи з полем ‘ currentSrc’:

Var currentSource = player.currentSrc; // отримуємо url // контенту player.currentSrc = 'path_to_new_media_source'; // замінюємо контент // у програвачі

Аналогічна робота з функцією перемотування відео. Цей функціонал реалізується через поле ' currentTime’ (Приймає значення типу 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.

• onabort– подія аварійного завершення програвання
• oncanplay– подія готовності до відтворення відео після завантаження достатньої частини у буфер
• oncanplaythrough– подія готовності до відтворення після повного завантаження контенту в буфер
• ondurationchange- подія зміни тривалості контенту
• onemptied- подія, що викликається при розриві з'єднання
• onended– подія закінчення відтворення
• onerror— подія помилки під час завантаження файлу контенту
• onloadeddata– подія завантаження контенту
• onloadedmetadata- Подія завантаження метаданих.
• onloadstart– подія початку завантаження файлу
• onpause– подія зупинки відтворення
• onplay- Подія початку відтворення
• onplaying– подія відтворення (виконуватиметься, доки відео не зупиниться)
• onprogress– подія процесу завантаження відео (виконуватиметься, доки не буде завантажено весь контент)
• onratechange– подія зміни швидкості відтворення
• onreadystatechange– подія зміни стану готовності відео програвача
• onseeked– подія закінчення перемотування відео
• onseeking- подія, що викликається при перемотуванні контенту
• onstalled- подію, що викликається при неможливості браузером отримати контент
• onsuspend– подія, що викликається під час зупинки завантаження контенту.
• ontimeupdate– подія, що викликається за зміни поточного положення відтворення
• onvolumechange– подія зміни гучності звуку
• onwaiting– подія зупинки відтворення для буферизації даних

За допомогою даних подій можна реалізовувати такі елементи відео плеєра, як плейлисти, відображення субтитрів, показ цільового кадру під час перемотування та багато інших.

Динамічні зміни якості відео

Як було сказано вище, HTML5 відсутній інструмент для роботи з розміром буфера, проте Media API дозволяє дізнатися тривалість буферизованої частини контенту, що необхідно для відображення на смузі перемотування частини, доступної до перегляду. Для цього достатньо виконати наступний код:

Var bufferedTime = player.buffered.end(0); // тимчасова межа // Буферизована частина

А тепер найцікавіше! Знаючи тривалість контенту в буфері можна реалізувати динамічне визначення якості контенту, що програється. Для цього потрібно реалізувати метод, який оцінюватиме швидкість завантаження інформації в буфер і залежно від її значення перемикатиме якість відео.

Ідея аналізу полягає в наступному: ми розраховуємо швидкість наростання буфера, і якщо вона нижче, ніж швидкість відтворення, то проводимо розрахунок часу до повної буферизації контенту і порівнюємо його з часом відтворення, що залишився. Якщо час буферизації з розрахованою швидкістю більше часу, що відстає, програвання, то перемикаємо контент на більш низьку якість.

Var bufferAnalizer = функція (playbackStartPoint, playbackEndPoint, bufferStartPoint , bufferEndPoint, тривалість) ( var oldQualityObj = this.qualityObj, playbackStart = 0, // новий playback start point bufferStart = 0; // новий buffer oldQualityObj.playbackEndPoint; bufferStart = oldQualityObj.bufferEndPoint; ) else ( playbackStart = playbackStartPoint; bufferStart = bufferStartPoint; ) fferStart // скільки забуферизовано "bufferSpeed": (bufferEndPoint - bufferStart) / (playbackEndPoint - playbackStart), "deltaPlayback": playbackEndPoint - playbackStart, // скільки було //відтворено "availTime": bufferEndPoint - playbackEndPoint // різниця між буффером і var restTime = тривалість - 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 існує спеціальний тэг для відображення субтитрів, однак жоден популярний браузер під час написання статті не підтримує його. Проте можна реалізувати цей функціонал руками. Нехай субтитри знаходяться у файлі 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.split(/\r\n/g); if (subItem.length >3) ( for (var i = 3; i< subItem.length; i++) { subItem += "
" + subItem[i]; ) ) var time = subItem.split(" --> "); self.subs.push(( id:subItem, sTime:self.toSeconds(time), eTime:self.toSeconds(time) ), text: subItem ));))), "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.eTime > currentTime) && (self.subs.sTime)<= currentTime)) { currentSub = self.subs.text; } else if ((self.subs.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(" ");

А потім перемотуємо в цьому контейнері відео:

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").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.webkitRequestF (); // Розвертаємо для Chrome і Safari)

Зверніть увагу, що для Chrome та Safari крім переведення контейнера в повний екран реалізовано необхідно привласнити його висоту та ширину значення 100%. Це пов'язано з тим, що виклик методу webkitRequestFullScreen()лише затемнити весь екран і розташує по його центру цільовий контейнер. Масштабування контейнера повністю і повністю перекладено на бік розробника.

Факт розгортання на повний екран контейнера моно визначити станом полів document.mozFullScreenElementдля Firefox та document.webkitIsFullScreenдля браузерів на WebKit.

Переведення контейнера назад у режим нормального відображення можливе функціями скасування.

// Визначаємо факт повноекранного відображення будь-якого контейнера. if (document.mozFullScreenElement || і Safari ) )

FullScreen API також реалізує події зміни стану відображення – 'mozfullscreenchange' та 'webkitfullscreenchange' відповідно. Вище було зазначено, що масштабування контейнера в WebKit лежить на розробнику, відповідно при поверненні до нормального відображення також потрібно змінити розмір контейнера з плеєром:

Document.addEventListener("webkitfullscreenchange", this.WebkitFullscreenEvent = function() ( if (!document.webkitIsFullScreen) ( self.container.width(width); self.container.height(height); ) ));

Інший функціонал

Визначення розміру файлу, що завантажується.

Як було зазначено, у розробника відсутня можливість визначити розмір відео файлу засобами HTML5. Однак ніхто не заборонить отримувати його розмір від бекенду або при формуванні списку відтворення, або при отриманні адреси файлу або через звернення до спеціального методу.

Перемикання аудіодоріжок

На даний момент відсутня реалізація перемикання аудіо доріжок. Звичайно, можна створити на сторінці кілька аудіо плеєрів з доріжками, однак у такому разі синхронізація відтворення відео та потрібного аудіо є вкрай нетривіальним завданням.

Отримання скріншоту відео, що програється

Якщо Вам знадобилося знімати скріншот відео, то про реалізацію цього з використанням можна прочитати.

Ефекти

Приємною особливістю HTML5 Video є те, що до програвача можуть бути застосовані будь-які ефекти, трансформації та маски, які можна здійснити через CSS3. Приклад такого функціоналу можна подивитися.

HTML5 vs Flash

Існує поширена думка, що HTML5 Video є своєрідним вбивцею Flash, т.к. пропонує схожий функціонал. Насправді все, звичайно, не зовсім так. Для розгортання преміум відео сервісів HTML5 годиться, т.к. не підтримує такі важливі особливості:

• Потокове відео. HTML5 підходить лише для відтворення відеофайлів.
• Захист контенту У той же час, Flash надає можливість використання захисних технологій.
• Єдиний API та його реалізація для всіх браузерів.
• Стандартний формат відео. Різні браузери = різні формати відео для HTML5 програвача.

Щоправда, варто зауважити, що роботи з розширення можливостей HTML5 Video до функціоналу Flash вже ведуться. Насамперед ця ініціатива виходить від пошукового гіганта Google – докладніше можна прочитати у доповіді про виступ представника компанії на конференції Streaming Media Створення скріншоту відео

PS

Найближчим часом чекайте статтю про аналітику HTML5 Video, що програється.

Однією з найчудовіших особливостей HTML5є потокове аудіо.

Якщо ви зайняті у сфері веб-розробки, то вибірка з 10 неймовірних аудіоплеєрів на HTML5дуже вам знадобиться.

- аудіо- та відеоплеєр, який написаний на чистому HTML5і CSS. Підтримка старих браузерів виконана за допомогою Flashі Silverlightплеєрів, які імітують HTML5 MediaElement API.
MediaElement має багато оформлень і підтримка популярних платформ: WordPress, Drupal, Joomla і т.д.

Цей плеєр досить мінімальний, але функціональний. Добре підходить, коли потрібні плейлисти та модні ефекти!

Ще один чудовий плеєр, можливо, найкращий зі списку. Плюси в тому, що він дуже простий у налаштуванні і є досить гнучким за розмірами і налаштовується на необмежену кількість кольорів.
У кросбраузерна підтримка, а для старих браузерів є його Flash-Аналог.

Ви використовуєте Mootoolsна вашому сайті? Якщо так, то, можливо, вам сподобається цей плеєр, виконаний на HTML5і Mootools JavaScriptфреймворк. Плеєр ідеально працює у всіх сучасних браузерах.

Цей плеєр єдиний із списку, який є платним. Він вартий всього $5 Але при цьому ідеально працює. Програвач має багато корисних функцій, наприклад, захист вашого аудіо від перехоплення за допомогою накладання сигналу, що дуже добре для комерційного використання.

Джерело: http://codecanyon.net/item/universal-html5-audio-player

У задіяні технології HTML5і Flashщо робить його дуже легким ( 10 Кб) надійним кросбраузерним рішенням для відтворення потокового аудіо.
Бажаєте дізнатися, що можна зробити за допомогою Sound Manager 2? Завітайте на перегляд демо!