І більше входять у життя кожної людини. Глобальна мережатакож схильна до цієї тенденції, про що свідчать успіх і популярність таких сервісів як 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+

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

Браузер	Формати
	OggTheora	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

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

Зверніть увагу, що в різних браузерах елементи керування відтворенням виглядатимуть по-різному. Тому для уніфікації необхідно розробляти власний інтерфейс програвача. Ідея вкрай проста: елементи управління являють собою 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; ) this.qualityObj = ( - bufferStart, // скільки забуферизовано "bufferSpeed": (bufferEndPoint - bufferStart) / (playbackEndPoint - playbackStart), "deltaPlayback": playbackEndPoint - playbackStart, // скільки було //відтворено "availTime": bufferEndPoint - playbackEndPoint // різниця між буффером і var restTime = тривалість - playbackEndPoint, bufferTime = (duration - bufferEndPoint) /this.qualityObj.bufferSpeed;< 2)) { if (this.quality == "normal") { this.quality = "low"; } } }

if ((bufferTime > restTime) && ((this.qualityObj.availTime / this.qualityObj.deltaPlayback))

Підключення субтитрів У стандарті HTML5 існує спеціальний тэг для відображення субтитрів, проте жоденпопулярний браузер

на час написання статті не підтримує його. Проте можна реалізувати цей функціонал руками. Нехай субтитри знаходяться у файлі subs.srt. Для початку підключимо його та занесемо вміст у спеціальний об'єкт:< 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 >Var toSeconds = function(time) ( var seconds = 0.0; if (time) ( var p = time.split(":"); for (var i = 0; i< subItem.length; i++) { subItem += "
3) ( for (var i = 3; i

" + subItem[i]; ) ) var time = subItem.split(" --> "); self.subs.push(( id:subItem, sTime:self.toSeconds(time), eTime:self.toSeconds(time) ), text: subItem )); ) ), "html");

Тепер залишилося створити таймер, який в залежності від поточного часу відображатиме потрібні субтитри в div'і з класом '.subs':<= 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);

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)

Preview thumbnails при перемотуванні

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 принесла нам новий інструмент доставки відео контенту користувачеві. Однак на даний момент через новизну стандарту існує ряд випадків, коли необхідне застосування Flash-технології. Рішення про те, який механізм використовувати цілком і повністю повинен залежати від цілей та потреб сервісу.

Корисні посилання

• Посібник для розробника з використання HTML5 video та audio
• Демонстрація відео ефектів
• Доповідь про майбутнє HTML5

PS

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

Дані відеоплеєри мають відкритий вихідний код, а також можуть відтворювати відео без adobe flash player. На додаток до цього, веб-розробники можуть додавати свої функції відеоплеєру через API jQuery. HTML5 все більше і більше підтримується різноманітними браузерами, але точну інформацію про те, які браузери підтримують даний плеєр знаходиться на сайті розробника.

Я вже писав раніше про один відеоплеєр і як його встановити: .

А зараз розглянемо інші відеоплеєри.

1. Open Standard Media (OSM) Player

На зміну adobe flash player, який забезпечував перегляд відео у високій якості, прийшов HTML5 OSM Player- Новий стандарт перегляду відео в інтернеті.

2. HTML5 Video Org

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

Використовуючи HTML5 Javascript бібліотеку відео працюватиме як у нових мобільних пристроях, і у старих браузерах.

3. OIPlayer jQuery плагін

Працює у Safari, Google Chrome, Firefox, IE. Але на комп'ютері потрібно встановити Flash або Java.

4. Projekktor відеоплеєр

Цей відеоплеєр має також відкритий вихідний код. Відеоплеєр написаний на основі Javascript, тому підтримує кросбраузерність.

5.

Цей плеєр на офіційному сайті більше не доступний.

Висновок

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

1. Plyr.io

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

Ключові особливості:

• Повна підтримка екранних дикторів та VTT;
• платформа, що гнучко настроюється, яка дозволяє користувачам змінювати зовнішній вигляд за своїм вибором;
• Широкий спектр інструментів для обробки та редагування;
• Адаптивний дизайн із функцією повноекранного режиму.

2. Videojs

Ще один плеєр, який розроблений з використанням HTML5. Video.js підтримує Flash-відео, HTML5, Vimeo та YouTube. Ви можете насолоджуватися відтворенням відео за допомогою Videojs на мобільних пристроях та настільних комп'ютерах. Цей відеоплеєр був запущений в 2010 році і зараз використовується більш ніж на 200 000 сайтів.

Ключові особливості цього плеєра для сайту HTML5:

• Широке охоплення форматів;
• Простота налаштування;
• Можливість підключення додаткових плагінів, які забезпечують підтримку багатьох соціальних мереж.

3. YouTube

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

Ключові особливості:

• YouTube простий у використанні;
• Доступний безкоштовно;
• Підтримуються всі формати та браузери.

4. Projekktor

Відеоплеєр із відкритим вихідним кодом. Projekktor був випущений під ліцензією GPLv3, він написаний з використанням JavaScript. Ця платформа має можливості, достатніми для вирішення всіх проблем, пов'язаних з кросбраузерною сумісністю.

Ключові особливості цього плеєра з плейлистом для сайту:

• Автоматичне визначення найкращих способів відтворення відео;
• Projekktor відомий завдяки вражаючому дизайну та зручності;
• Професіонали вважають Projekktor одним із найнадійніших рішень для відтворення відео.

5. JPlayer

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

Основні функції:

• Може бути розгорнутий протягом декількох хвилин і простий у використанні;
• Повністю настроювана платформа з підтримкою CSS і HTML;
• Чи не навантажує процесор.

6. Mediaelement.js

Це просунутий відео та аудіо-плеєр на HTML5, який підтримує Silverlight з Flash. А також надає інтерфейс, який коректно відображається у всіх браузерах. Плеєр використовує оновлені та настроювані інструменти Flash разом з плагінами Silverlight, щоб усі старі та нові браузери могли використовувати один інтерфейс. Не потрібно створювати програвач для сайту, тому що є Mediaelement.js .

Основні функції:

• Відео та аудіо-плеєр розроблений з підтримкою CSS та HTML;
• Mediaelement.js відповідає різним стандартам доступності, включаючи WebTT .

7. Afterglowplayer

Плеєр підтримує керування всіма елементами відео.

Ключові особливості:

• Простий у налаштуванні та використанні;
• Підтримує багато форматів відеофайлів;
• Швидкий час відгуку.

Кращі плагіни HTML5-відеоплеєрів для WordPress

1. Responsive Video Embeds

Responsive video embeds містить багато цікавих функцій. Дозволяє вставляти кілька відео в один запис і змінювати розмір вбудованих відео у вигляді iFrames . Таким чином вони зможуть вписуватися у вікна різних розмірів.

Цей просунутий плеєр для мобільного сайту в даний час підтримує майже всі популярні відео, що розміщуються на WordPress.TV, Revision 3, hulu.com, Scribd, Daily motion, Vimeo та YouTube і т. д. Він доступний на безкоштовній основі:

2. Video Gallery WordPress Plugin

Цей WordPress-плагін коштує від $15. Він не лише обробляє галереї відео, але й може працювати як галерея, до якої можна додавати аудіо, зображення та відео. Він також дозволяє розміщувати рекламу на YouTube. Щоб допомогти професіоналам у реалізації маркетингових кампаній, цей інструмент дає можливість видаляти водяні знаки та замінювати їх на нові логотипи. А також допомагає ділитися контентом у соціальних мережах одним кліком миші:

3. Youtube Channel Gallery

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

4. MediaElement.js

Просунутий аудіо-відео HTML5-плеєр, який працює з Flash Fallback. З його допомогою можна отримати доступ до широкого спектру ярликів для аудіо та відео. Можна використовувати повноекранний режим, оскільки він працює в Internet Explorer і Chrome .

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

MediaElements.js дозволяє керувати безліччю інтерактивних функцій одним кліком миші. Він відмінно підійде для початківців завдяки своєму простому та зручному інтерфейсу.

Якщо порівняти існуючий сьогодні YouTube з тим, який був ще 5-7 років тому, то це зовсім два різні поняття.

Сотні терабайт ексклюзивного контенту, постійно зростаюча аудиторія і – змінилося багато, але про все по порядку…………………….

→ Ще напередодні 2017 року керівництво YouTube анонсувало новий програвач HTML5.

Цікаво, що спочатку користувачі мали право вибору, але тепер усім примусово нав'язали новий браузер.

Не дивно, що у нової функції з'явилися прихильники та противники, тому нижче ми розповімо про технологію html5 на YouTube, а також як її відключити ↓↓↓

Що це за Плеєр?

Багато користувачів YouTube в кінці 2016 стали спостерігати проблеми з роботою сервісом!

Як виявилось, причина крилася в черговій новинці - програвачі відео html5.

Приклад проблемки ↓↓↓

Чому нова функція виявилася тягарем для багатьох і, як її відключити, далі детально ⇓

→ Програвач html5 – новий стандарт відтворення відео, який змінив вже морально застарілий flash-плеєр.

→ Ще наприкінці 2016 року усі охочі могли протестувати функцію, активувавши відповідну кнопку ().

Розробники обіцяли багато цікавих плюшок, серед яких:

• відсутність уразливостей та гальмування;
• швидке відкриття роликів;
• підтримка відео 64-біт;
• відтворення нових стандартів (H.264, HTMLVideoElement та інше).

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

• постійне підвисання;
• поява артефактів на відео;
• некоректність відображення у багатьох браузерах.

Як виявилося, основні причини пов'язані в:

1. застарілому залозі
2. невідповідність ПЗ
3. драйверів
4. браузера та багато іншого.

Тепер за адресою () можна спостерігати напис «Зараз використовується програвач HTML5 завжди, коли це можливо», отже, більшість глядачів не мають вибору.

Увага!

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

Якщо в нижній частині є пункт «Про плеєр html5», то використовується відповідний плеєр

Ось ↓

Саме тому ми підготували найкращі способи, як відключити програвач html5 на YouTube у різних браузерах.

Це цілком реально і не займе багато часу, тому уважно читайте. ⇓⇓⇓

Прибираємо цей плеєр уFirefox

На Firefox проблему можна вирішити як мінімум двома способами:

1) З допомогою спеціальних доповнень (Disable Youtube HTML5 Player)

2) Або вручну.

У першому випадку досить просто встановити відповідне розширення, щоб вимкнути плеєр html5 у YouTube.

Але найпростіший метод ми розглянемо нижче: ↓↓↓

• Введіть у пошуковий рядок "about:config", після чого відкриється панель розробника.
• Скопіюйте ці компоненти в окремий документ: "media.ogg.enabled", "media.wave.enabled", "media.webm.enabled", "media.windows-media-foundation.enabled".
• Кожен із них копіюємо у відповідний рядок пошуку, знаходимо у списку та відключаємо. Для цього можна двічі натиснути на запис.
• Цю дію необхідно виконати з кожним компонентом, наведеним вище.
• Тепер перезавантажте браузер.

Ви можете помітити, що відтворення роликів здійснюється через flash-плеєр. !!!

Загалом нічого складного і вже через 5 хвилин ви зможете насолоджуватися улюбленими роликами.

А тепер дізнаємось, як це виконати в інших браузерах ⇓⇓⇓

Забираємо цей плеєрвChromeіOpera

Тепер ми розглянемо інший метод, як вимкнути цей плеєр за допомогою спеціальної програми - Disable Youtube HTML5 Player ↵

Цей спосіб підійде для браузерів Opera, а також Chrome.

Нижче ми опишемо, як встановити це розширення на прикладі браузера Google Chrome:

• пройдіть посилання, яке ми привели вище;
• натисніть кнопку «Встановити» і дочекайтеся закінчення процесу;
• перезавантажте браузер.

У розділі «Параметри» — «Додаткові інструменти» — «Розширення» можна побачити, що утиліта встановлена.

P.S— Перевірте, чи активовано чекбокс «Увімкнути».

Відкрийте будь-який ролик і клацніть правою кнопкою миші та помітите, що вже працює Flash-плеєр.

При необхідності можна відключити у розширеннях disable YouTube html5 player і тоді Flash-плеєр знову не працюватиме. У браузері Opera процедура аналогічна, тому описувати її докладно нема рації.

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

Таким чином, можна дійти невтішного висновку, що керівництво YouTube представило досить сирий продукт, втім, добре, що можна відключити подібні доробки самостійно.

Останнім часом ми вже не уявляємо свого життя без мобільних пристроїв. І всім нам хочеться максимальної багатозадачності та швидкої роботи девайсу. Але проблема відтворення відео та аудіо на мобільних пристроях без використання Flash та Silverlight гостро назрівала вже давно. Тому на зміну цим стандартам поступово став приходити новий – HTML5 плеєр для аудіо та відео. Ефективність відтворення відео HTML5 пов'язана з нативною підтримкою медіа (щоб відтворити медіафайл найбільш ефективно, потрібно відтворювати його нативно, тобто повинна проводитися максимальна інтеграція між браузером та операційною системою, а останньою - із залізом).

Перейдемо тепер до практичної частини та розберемося, як додати відео на сайт HTML.

Використання тега VIDEO

Для додавання відео на веб-сторінку за допомогою HTML використовується тег video. Застосовується він так:

Приблизно так виглядатиме відео-плеєр (у кожному браузері свій стиль):

Але варто врахувати, що:

1. Не всі браузери підтримують тег video;
2. Не кожен браузер підтримує використовуваний відео кодек.

Якщо з першим пунктом проблем значно менше (більшість сучасних браузерів, все-таки коректно працюють із зазначеним тегом), то на другий пункт варто звернути пильну увагу. Поговоримо про це питання дещо докладніше.

Підтримка відео кодеків HTML5 у різних браузерах

Для повноти інформації варто навести таку таблицю:

Браузер	Google Chrome	Mozilla Firefox	Safari	Opera	Internet Explorer
WebM	Є	Є	Ні	Є	Ні
H.264	Є	Ні	Є	Ні	Є
ogg/theora	Є	Є	Ні	Є	Ні

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

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

Атрибути тега VIDEO

До атрибутів тега videoслід віднести:

• src- Шлях до відеофайлу;
• autoplay- примусове відтворення відео після завантаження сторінки;
• controls- відображається панель керування відео (play, pause, volume тощо);
• width/height- Встановлює ширину / висоту відеоплеєра;
• loop- Вказує на повторення відео після завершення (циклічне відтворення);
• poster- визначає адресу зображення, яке буде виводитися доки відео не програється або недоступне;

Примітка:Найбільш простий спосіб додати відео на сайт – використовувати сервіс YouTube. У конструкторі сайтів "Нубекс" є докладна стаття про додавання відео з YouTube: