Как встроить проигрыватель в браузер

Обновлено: 05.07.2024

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

Плеер для сайта HTML5 - 15 лучших решений 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 . Таким образом, они смогут вписываться в окна разных размеров.

Лучшие сервисы мониторинга сайтов 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 позволяет управлять множеством интерактивных функций одним кликом мыши. Он отлично подойдет для начинающих благодаря своему простому и удобному интерфейсу:

Пожалуйста, оставляйте свои мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, отклики, подписки, лайки, дизлайки!

Пожалуйста, оставьте свои мнения по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, отклики, лайки, дизлайки, подписки!

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

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

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

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

Интерфейс HTMLMediaElement

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

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

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

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

Теперь надо добавить немного js-кода, чтобы нажатие на кнопку play переключало ее состояние и соответственно запускало видео-ролик или ставило его на паузу:

При желании можно сразу добавить несколько css-стилей для кнопок управления и их различных состояний и.

… казалось бы, все уже замечательно работает, но не тут-то было! Есть несколько мелочей, которые нам также нужно учесть.

Проигрывание сначала

Во-первых, нам нужно правильно обработать окончание проигрывания видео-ролика (если, конечно, оно не зациклено), и в этот момент нужно переключить кнопки управления так, чтобы вместо состояния «pause» было состояние «play»:

Контекстное меню

Во-вторых, браузеры обычно добавляют возможность управлять воспроизведением через контекстное меню. Это означает, что пользователь, вообще говоря, может что-то изменить в обход наших элементов управления. Этот момент нужно также отловить и внести необходимые изменения во внешний вид контролов. Для этого достаточно подписаться на события onplay и onpause.

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

Кликабельное видео

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

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

Прогресс

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

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

И несколько ссылок на соответствующие элементы для быстрого доступа в объект controls:

Первым делом, нам нужно понять, какова длительность ролика — для этого у video-элемента есть свойство duration. Отследить это значение можно, например, в момент готовности ролика к проигрыванию — по событию oncanplay:

В данном случае, мы попутно определяем, нужно ли отображать количество часов в видео-плеере (кстати, вообще говоря, спецификация предполагает, что длительность ролика может изменяться — в этот момент срабатывает событие ondurationchange, и к тому же быть бесконечной — например, при стриминге радио).

Также мы используем специальную функцию formatTime для перевода секунд в формат HH:mm:ss или mm:ss:

Для отображения процесса проигрывания нам понадобится событие ontimeupdate, срабатывающее при изменении текущего момента:

Свойство currentTime выдает в секундах текущее время. Его же можно использовать, чтобы изменить время проигрывания:

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

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

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

С соответствующими стилями для включенного и выключенного состояний:

Для переключения состояния динамика нам понадобится свойство mute:

(Стандартные методы jQuery для переключения css-классов не работают с SVG-элементами.)
Если вы хотите также менять уровень громкости, то вам поможет свойство volume, принимающее значения в диапазоне [0, 1].

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

Что еще.

проверка поддержки браузером HMTL5 Video, ,
поддержка субтитров, в том числе для обеспечния accessibility.

Либо нужно делать соответствующие проверки или отлавливать возможные исключения. Исключения вообще надо отлавливать, например, событие onerror, возникающее при ошибке загрузки видео-потока :)

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

В этой статье мы расскажем о внедрении WebRTC-плеера для воспроизведения живых (Live) потоков с веб-камер и IP камер.

Здесь может возникнуть несколько вопросов:

— Что такое WebRTC плеер?

Это веб-плеер для воспроизведения Live-стримов и трансляций с низкой задержкой, у которого под капотом технология WebRTC.

— Чем WebRTC плеер лучше обычного плеера?

Может играть видео с низкой задержкой, до 500 миллисекунд.

— Какие потоки умеет играть WebRTC плеер?

Плеер может играть стримы с веб-камер, RTSP потоки с IP-камер, RTMP потоки.

— Что если WebRTC не поддерживается в браузере?

В этом случае плеер переключится на другую технологию, доступную в этом браузере.

Внедрение

Мы решили, что внедрение плеера должно быть максимально простым и соответствовать двум основным принципам:

Keep it simple (делай проще)
Don't make me code (не заставляйте меня кодить)

Таким образом, просто нажимаем кнопку Copy To Clipboard и код плеера готов к вставке на сайт в виде iframe:

Для того, чтобы поток запустился, нужно обязательно указать его название или RTSP адрес в поле streamName.

После этого можно протестировать поток по кнопке Test Now или сразу вставить код плеера на страницу.

Мы убедились что плеер работает. Осталось скопипастить его код на web-страницу. В результате страница сайта с плеером будет выглядеть так:

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

Дополнительные параметры

В атрибуте iframe src передается урл страницы, которая содержит сам плеер. Этому урлу можно передать параметры, которые будут использоваться плеером.

Это адрес потокового сервера, который адаптирует потоки для плеера.

Это имя потока или его RTSP-адрес.

Это список технологий воспроизведения, которые указываются в порядке приоритета.

Например, если вы хотите использовать только WebRTC, передаете так:

Если требуется автоматическое переключение на другие технологии, добавляем их в запрос в порядке приоритета слева направо:

Нужно передать этот параметр, чтобы плеер начал играть поток автоматически после загрузки.

Сервер

Сторона сервера отвечает за адаптацию потоков. Задача сервера принять поток и корректно отдать плееру в одной из следующих технологий: WebRTC, Flash, Media Source Extensions, WSPlayer.

Кастомный плеер

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

API является частью Web SDK для WCS и работает с div — элементами. Любой div — элемент на странице можно заставить играть видео с помощью этого API.

Создадим на странице элемент myPlayer и дадим ему размеры, чтобы видеть его на странице визуально:

Далее, чтобы играть видео, вызываем следующий код API:

Здесь мы передаем имя потока stream44 и элемент myPlayer. В результате видео будет играть в указанном div-элементе.

Как видите, код использования API также достаточно простой. Однако чтобы он заработал требуется импортировать необходимые скрипты API и установить соединение с сервером.

После этого нужно будет добавить управление воспроизведением (stop/play) и звуком.

Заключение

В статье показали как выглядит страница внедрения WebRTC-плеера и какие технологии доступны на случай, если WebRTC не поддерживается в браузере. Описали как выглядит формирование кода внедрения, какие параметры можно менять для встроенного плеера и как можно его кастомизировать через JavaScript API.

Ссылки

Embed Player — пример страницы внедрения WebRTC плеера.
Source — исходный код страницы внедрения.

Player — сам внедряемый плеер.
Source — исходный код внедряемого плеера.

В этой статье мы собрали лучшие плееры для сайта HTML5 и плагины под них. Эти плееры могут воспроизводить видео из YouTube или Dailymotion на сайте.

1.VideoJS

VideoJS – это бесплатный, адаптивный онлайн плеер видео с открытым исходным кодом.Он способен использовать Flash или другую технологию воспроизведения онлайн-видео (например, Silverlight).

Плеер включает в себя базовый функционал для воспроизведения: автоматический старт и предварительную загрузку. Он также использует JavaScript для реализации кроссбраузерности.

Это лучший бесплатный видеоплеер для публикации видео. Он также реализован в виде плагина для WordPress.

Шаблонизатор – построен на основе HTML и CSS. Вы также можете использовать дизайнер обложек .
Плагины –данный видеоплеер поддерживает несколько плагинов и продвинутых форматов, таких как HLS и DASH. Список плагинов доступен на этой странице.

При помощи плагинов плеер может быть значительно усовершенствован. Некоторые расширения для этого плеера:

Analytics – позволяет следить за событиями Google Analytics в плеере video.js.
Playlist – реализует поддержку плейлистов в video.js.
Brand – добавляет логотип в панель управления плеером.
Поддержка Chromecast.

2.JW Player

JW Player поддерживает воспроизведение HTML5 видео и предлагает большое количество инструментов от аналитики до настроек доступности. А также набор кнопок управления видео в HTML5. Это лучший плеер для сайта. Его также можно использовать в WordPress и как альтернативу видеоплееру YouTube.

Инструменты: JW Player, предлагает широкий набор инструментов, доступный через расширения. Плеер имеет широкие возможности настройки режимов работы и внешнего вида, а также встроенный API.

Также доступны плагины JW Player для большинства популярных CMS.

3. Media Element.js

MediaElement.js – это jQuery-плагин, который позволяет использовать тег video в сочетании с файлом, сохраненным в формате AVC. Если плеер не поддерживает видеоформаты html5, плагин заменяет его на Flash или Silverlight.

Плагин предоставляет стандартные кнопки управления воспроизведением, обложки и полноэкранное видео. А также позволяет добавлять уникальные опции: повторение воспроизведения, автоматический перевод (предоставленный Google Translate), демонстрация заставки после видео (отображает заданный HTML код). И даже виртуальную фоновую подсветку, которая обрамляет рамку видео подходящими цветами, взятыми из него во время воспроизведения (только в версии HTML5 видеоплеера).

4. Video for Everybody

Video for Everybody – это одно из самых ранних решений для поддержки HTML5 и Flash видео. Оно состоит из базовой разметки, которая использует HTML5 для перехода к следующему поддерживаемому формату. Для этого используется элемент <video> .

Настраиваемые кнопки управления
Поддержка видео в формате WebM.

5. Kaltura HTML5

Бесплатный HTML5 видеоплеер с открытым исходным кодом, который позволяет создавать настраиваемые кроссбраузерные и кроссплатформенные обложки для плеера. Существует множество шаблонов, встроенных в плеер Kaltura .

Мультиплатформенная поддержка.
Высокая производительность.
Инструменты для рекламы и аналитики – рекламные форматы включают в себя VAST 3.0, а также интегрированные плагины для Google DoubleClick DFP, FreeWheel, Ad Tech, Eye Wonder, AdapTV, Tremor Video и других.

6. Plyr

Простой настраиваемый плеер. Он поддерживает HTML5 видео из YouTube и Vimeo.

Доступность – в плеере реализована поддержка заголовков VTT и устройств для чтения с экрана.
Настраиваемый – возможность изменять плеер по своему усмотрению.
Адаптивность – плеер изменяет размер в зависимости от диагонали экрана пользовательского устройства.
HTML видео и аудио – поддержка аудиоформатов.
Встраиваемое видео –возможность проигрывать видео из YouTube и Vimeo.
Прямые трансляции – поддержка прямых трансляций через hls.js, Shaka и dash.js.

7. Elite

Адаптивный настраиваемый плеер для WordPress с поддержкой рекламных форматов и воспроизведения видеороликов с YouTube, Vimeo и Google Диска.

Простота установки.
Поддержка плейлистов/каналов YouTube и Vimeo.
Поддержка YouTube 360 VR.
Поддержка прямых трансляций (HLS .m3u8)
Загрузка видео на Google Диск.
Несколько форматов рекламы: pre-roll (до видео), mid-roll (в середине), post-roll (после), всплывающая реклама.
Поддержка форматов изображений Jpg, Png, gif.

8. Ultimate

Адаптивный видео/аудио плеер с функцией воспроизведения видео с YouTube или Vimeo. Он поддерживает только форматы mp4/mp3, работает на мобильных и настольных устройствах. Это платный плеер, и вы можете приобрести его здесь .

Шифрование URL видео, которое позволяет скрыть адрес источника от пользователей.
Адаптивность.
Поддержка нескольких вариантов качества видео.
Приватные / защищённые паролем видео.
Поддержка HLS / m3u8 видео.
Поддержка панорамного видео и VR.
Функция распространения видеороликов в социальных сетях.
Возможность добавить логотип компании в виде водяного знака.
Опция загрузки видео.

9. jPlayer

Бесплатный HTML видеоплеер с открытым исходным кодом, написанный на JavaScript. Он простой и лёгкий, без ограничений использования по лицензии.

Простота установки.
Настраиваемые обложки.
Доступность плагинов.
Поставляется с документацией.
Расширяемая архитектура и кроссбраузерность.

10. Elmedia

Elmedia – плеер под Mac OS, воспроизводящий все типы видео в самом плеере, в том числе и онлайн. Вы сможете смотреть видео с Vimeo, Dailymotion, Facebook и т.д. А также загружать видеоролики с этих сайтов.

Поддержка аппаратного ускорения.
Вы сможете смотреть видео из YouTube, Vimeo, Dailymotion, не открывая браузер.
Поддержка SWF (в PRO-версии).
Создание скриншотов с видео.
Загрузка видео (в PRO-версии).
Опция извлечения аудио из видео.

11. Chameleon – HTML5 видео плеер с поддержкой Flash

HTML5 видео – это одна из самых крутых новых возможностей. Но Internet Explorer не поддерживает полноэкранное воспроизведение.

Chameleon решает эту проблему. Когда браузер не может переключиться в полноэкранный режим, используется Flash.

Две обложки на выбор.
Построен на CSS и шрифтов иконок. Это гарантирует отличное отображение на Retina-экранах.
Может использоваться на адаптивных сайтах.
Настраиваемое выпадающее меню, которое может включать в себя ссылку на авторские права.
Иконки социальных сетей, чтобы пользователи могли делиться вашим видео.

12. Afterglow

Простой видеоплеер с дополнительными инструментами. Он легко встраивается и настраивается, с открытым исходным кодом.

Кроссбраузерный: работает в большинстве браузеров и устройств. IE поддерживается вплоть до IE9.
Адаптивный по умолчанию.
Переключение разрешения.

Топ плагинов HTML5-видеоплееров для WordPress

13. Плеер Videojs HTML5

Плеер Videojs HTML5 поддерживает воспроизведение видео с сайтов на настольных и мобильных устройствах. Он обеспечивает простое встраивание внешних файлов через библиотеку Videojs.

Встраивание видео, сохраненного в формате mpeg4 в запись/страницу на WordPress-сайте.
Адаптивный.
Добавление HTML5 видео, которые совместимы со всеми основными браузерами.
Добавление видео с картинками-постерами.

14. Video Embed & Thumbnail Generator

Плагин видеоплеера с возможностью переключения на Flash для браузеров, не поддерживающих HTML5 видео.

Video.js (файлы включены в плагин);
Плеер по умолчанию использует MediaElement.js, который был представлен в WordPress 3.6
JW Player 6.

15. FV Flowplayer

Бесплатная, лёгкая в использовании альтернатива для встраивания видео в формате FLV и MPEG4 на страницы или в записи.

Автоматическая проверка кодировки видео.
Адаптивный.
Настраиваемые начальный и конечный экраны. Вы можете использовать персональный дизайн до и после видео.
Все дополнительные функции доступны в стандартной сборке (Google Analytics, горячие клавиши, субтитры, замедленное воспроизведение, случайная перемотка, поддержка Retina-дисплеев).
Доступна профессиональная лицензия для одного сайта (JW Player требует пакет из пяти лицензий для доступа ко всей функциональности)
Кроссбраузерный.
Поддержка Amazon S3, CloudFront и других сетей доставки контента.
Полностью брендируемый.
Поддерживает продвинутую видео рекламу.

Дайте знать, что вы думаете по этой теме статьи в комментариях. Мы крайне благодарны вам за ваши комментарии, дизлайки, подписки, отклики, лайки!

Пожалуйста, оставьте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, отклики, подписки, дизлайки!

Читайте также: