Как сделать собственный видео-плеер на HTML5 Video. HTML5-видеоплееры, о которых вы должны знать Расширение html5 для google chrome

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

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

• Tutorial

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

Напомню, что video-элемент сам по себе уже обеспечивает необходимый набор контролов для управления проигрыванием. Чтобы была видна панель управления воспроизведением, достаточно указать атрибут controls .

API для управления воспроизведением

Стандарт HTML5 для работы с видео вводит в DOM новый интерфейс — HTMLVideoElement, наследующий в свою очередь интерфейс HTMLMediaElement.

Интерфейс HTMLMediaElement

Это общий интерфейс для обоих медиа-элементов (аудио и видео), описывающий доступ к базовым возможностями работы с медиа-контентом: контроль источника контента, управление воспроизведением, изменение уровня звука и обработка ошибок. Основные свойства и методы, которые нам понадобятся:

Состояние сети и готовность к работе
src — ссылка (url) на воспроизводимый контент
buffered — буферизованные куски видео

Воспроизведение и контролы
currentTime — текущий момент проигрывания (с.)
duration — длительность медиа-контента (с.)
paused — находится ли воспроизведение на паузе
ended — закончилось ли проигрывание
muted — включение/выключение звука
volume — уровень звука
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-элемент, которым мы хотим управлять, и элемент на который можно нажимать для управления текущим состоянием:

#controls span { display:inline-block; } #playpause { background:#eee; color:#333; padding:0 5px; font-size:12pt; text-transform:uppercase; width:50px; }

Обратите внимание на инвертирование состояния кнопки (paused) и действия (play).

Теперь надо добавить немного js-кода, чтобы нажатие на кнопку play переключало ее состояние и соответственно запускало видео-ролик или ставило его на паузу:
$(document).ready(function(){ var controls = { video: $("#myvideo"), playpause: $("#playpause") }; var video = controls.video; 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(); });

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

Прогресс

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

​ 00:00 / 00:00

И соответствующие стили:

#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; }
И несколько ссылок на соответствующие элементы для быстрого доступа в объект controls:
var controls = { ... total: $("#total"), buffered: $("#buffered"), progress: $("#current"), duration: $("#duration"), currentTime: $("#currenttime"), hasHours: false, ... };

Первым делом, нам нужно понять, какова длительность ролика — для этого у 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.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.style.width = Math.floor(buffered * controls.total.width()) + "px"; }, false);

Важный нюанс относительно свойства buffered , который нужно иметь в виду, заключается в том, что он предоставляет не просто время в секундах, а промежутки времени в виде объекта TimaRanges. В большинстве случаев это будет только один промежуток с индексом 0, и начинающийся с отметки 0c. Однако, если браузер использует HTTP range запросы к серверу, например, в ответ на попытки перейти к другим фрагментам видео-потока, промежутков может быть несколько. Также надо учитывать, что в зависимости от реализации браузер может удалять из буфера памяти уже проигранные куски видео.

Промежуточный результат:

Звук

Наконец, давайте добавим еще небольшой штрих к нашем видео-плееру — возможность включать и выключать звук. Для этого добавим небольшой контрол с динамиком (SVG-иконка взята с сайта The Noun Project):

С соответствующими стилями для включенного и выключенного состояний:
#dynamic { fill:#333; padding:0 5px; } #dynamic.off { fill:#ccc; }
Для переключения состояния динамика нам понадобится свойство 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 , принимающее значения в диапазоне .

Финальный результат:

Что еще...

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

• проверка поддержки браузером HMTL5 Video,

6.6K

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 все, начиная от соотношения сторон окна плеера для сайта, качества видео и продолжая типом видеопотока, темы и ссылки. Поддерживаются различные настраиваемые виджеты.

HTML5 Video Player - это программа для конвертирования видео в веб-формат HTML5. Для начала работы вам нужно загрузить видео, выбрать темы, и ваша веб-страница будет готова для загрузки на сайт.

Программа поддерживает почти все форматы видео в качестве исходного материала, и конвертирует видео в формат HTML5, который поддерживается всеми популярными браузерами. HTML5 Video Player также имеет основные операции редактирования видео, такие, как обрезание и вращение видео. Во встроенном плеере вы можете просмотреть результат перед сохранением. Также можно открыть страницу прямо в браузере. Просмотр возможен в таких браузерах, как IE, Firefox и Chrome.

В программе есть несколько скинов для вашего будущего плеера на сайте. Есть также несколько тем оформления для плеера. Программа также поддерживает браузеры для таких операционных систем, как iOS/ Android/ Windows Mobile, что делает его пригодным для оптимизации видео под просмотр на мобильных устройствах.