Qiziqarli net player playerjs html

События JS API

По-умолчанию, все события будут приходить в функцию PlayerjsEvents (в настройках название функции можно поменять) с тремя аргументами:

event название события
id идентификатор плеера
info данные

function PlayerjsEvents(event,id,info) < if(event= )< alert(event); >if(event = ) < console.log(event,id,info); >>

Есть возможность разбить подписку на несколько функций. Для этого в настройках вместо названия функции PlayerjsEvents укажите объект

В этом примере событие play придет в функцию onPlay, а все остальные события будут приходить в onOther.

Событие (event)	Значение	Данные (info)
init	инициализация	—
start	запуск плеера	—
play	запуск воспроизведения	—
userplay	запуск инициирован пользователем	—
pause	пауза	—
userpause	пауза инициирована пользователем	—
stop	остановка	—
end	конец воспроизведения	—
finish	конец воспроизведения включая рекламу	—
new	запуск нового файла	—
time	изменение времени воспроизведения	время воспроизведения в секундах
duration	изменение длительности	длительность в секундах
seek	перемотка	время в секундах
mute	выключение звука	—
unmute	включение звука	—
volume	громкость	громкость от 0 до 1
quality	изменение качества	название качества
audiotrack	изменение аудиодорожки	название аудиодорожки
subtitle	включение субтитров	название субтитров
speed	изменение скорости воспроизведения	значение скорости
fullscreen	полноэкранный режим	—
exitfullscreen	выход из полноэкранного режима	—
buffering	начало буфферизации	—
buffered	конец буфферизации	—
loaderror	ошибка загрузки	описание ошибки
error	ошибка воспроизведения	описание ошибки
fragment	HLS фрагмент	название файла
height	изменилась высота плеера	значение в пикселях
playlist	загрузился плейлист	—
download	пользователь нажал на кнопку скачивания	—
visibility	изменилась видимость плеера	—
resize	изменились размеры плеера в обычном режиме	ширина,высота
geo	плеер получил геоданные
casted uncasted	подлючение / отключение Хромкаста
ui	отображение панели управления	0 или 1
click	нажатие на плеер	—
line	нажатие на таймлайн	—

Слушатели

Также есть возможность подписки на события через слушателей, если это необходимо (в этом случае события не будут приходить в PlayerjsEvents). Включить этот режим можно опцией С помощью слушателей в настройках API.

document.getElementById("player").addEventListener("play",onPlay);

Как слушать события плеера, который находится в iframe

Для этого нужно включить в настройках опцию Модули / API / Поддержка postMessage. События будут приходить в window по подписке message c объектом данных.

window.addEventListener("message", function (event) < console.log(event.data); >);

Источник

PlayerJS

Вы можете легко собрать свой HTML5 плеер в конструкторе PlayerJS, скачать .js файл и установить одной строкой JavaScript, кодом iframe или плагином WordPress или DLE. У нас также есть облачный хостинг плееров в версии PRO.

PlayerJS — это конструктор плееров, мы не храним медиа контент. Вы можете создать плеер, а файлы для воспроизведения загружать со своего сервера, YouTube, Vimeo или Dailymotion.

Вы можете воспроизводить все, что поддерживают браузеры и онлайн индустрия в данный момент. Как правило, это файлы MP4, MP3, а также стримы HLS и DASH. Также есть интеграция API видеосервисов YouTube, Vimeo и Dailymotion. Мы также поддерживаем DVR, Airplay, Chromecast и режим Picture in Picture для браузеров Webkit.

Используйте официальный плагин для WordPress. Он позволяет публиковать видео или аудио простым шорткодом.

Мы не показываем свою рекламу, логотипы и вотермарки в бесплатной версии (и не планируем). Мы не контролируем плееры — они работают полностью автономно и не содержат код, который может быть использован нежелательным образом в будущем.

Да, вы можете показывать рекламу в формате VAST или VPAID. PlayerJS используют крупные рекламных сети, поэтому мы в курсе всех рекламных стандартов.

Вы можете легко подключить сбор событий в Google Analytics. В PlayerJS также есть трекинг времени, если вы хотите контролировать глубину воспроизведения отдельных пользователей.

Есть открытый JS API на все случаи жизни. Можно получать все события плеера и отправлять команды через JavaScript.

Платная версия конструктора содержит больше настроек для создания сложных интерфейсов. У нас нет регулярной подписки. Вы можете купить PRO, создать свой плеер и не продливать подписку после установки — плеер продолжит работать без ограничений. Вы можете использовать бесплатную версию в коммерческих проектах.

Мы будем рады помочь и ответить на все ваши вопросы в рамках своей компетенции. Техническая поддержка работает на русском языке в постоянном режиме.

Эти шаблоны созданы в конструкторе PlayerJS (можно использовать и редактировать совершенно бесплатно)

Источник

Команды и запросы JS API

** на всех платформах работает только вследствие действий пользователя.

API находится в постоянном процессе разработки, если чего-то не хватает — напишите нам через обратную связь.

Как узнать, что плеер готов работе

Можно отследить событие init, которое плеер присылает после инициализации. Также с версии 9.25 можно указать параметром ready название функции, которую плеер вызовет, когда будет готов.

var player = new Playerjs(ready:»PlayerReady», file:». «>); function PlayerReady(id)

Свои параметры

чvar vars = player.api("vars"); console.log(vars.my1); // a

Таким же образом свои переменные можно передавать в плейлистах.

Как отправлять команды плееру внутри iframe

Для этого есть специальный механизм postMessage. Чтобы он заработал, нужно включить его в настройках Модули / API / Поддержка postMessage. Например, так выглядит iframe:

Чтобы отправить ему команду нужно передать объект с командой api

document.getElementById("player").contentWindow.postMessage(api":"play">, "*");

Если нужно передать параметр, то в объект добавляется set

document.getElementById("player").contentWindow.postMessage(api":"volume","set":0.5>, "*");

В ответ на запросы плеер отправляет событие message с объектом с 16 версии (в answer будет ответ).

document.getElementById("player").contentWindow.postMessage(api":"time">, "*");

window.addEventListener("message", function (event) < console.log(event.data.event, event.data.answer); >

Символ * в конце означает, что вы доверяете этому iframe. Если нет, то вместо звездочки нужно передавать URI.

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

Источник

10 бесплатных HTML5 аудио/видео плееров для разработчика

С каждым днем мы все больше и больше слышим о HTML5. По мнению экспертов HTML5 — это будущее Интернета. В HTML5 есть очень интересные функции, например воспроизведение аудио-видео роликов.

Предлагаю вашему вниманию краткий обзор 10 бесплатных HTML5 видео плееров для разработчиков.

Plyr

Plyr — простой, легковесный, кастомизируемый, доступный (accessible) HTML5 плеер для воспроизведения как аудио, так и видео контента.

Поддерживает популярные стриминговые платформы: YouTube и Vimeo. Работает во всех современных браузерах.

PlayerJS

Позволяет создать полностью свой плеер. Есть возможность управлять дизайном, настройками и рекламой в конструкторе плееров для сайтов PlayerJS. Используйте свободу выбора. В конструкторе есть все необходимые опции, чтобы создать свой плеер мечты.

MediaelEment.js

HTML5 и проигрыватель на чистом HTML и CSS с фолбеком на Flash и Silverlight. На данные момент входит в ядро WordPress.

jPlayer

Это jQuery плагин для проигрывания аудио и видео. Поддержка форматов: mp3, m4a (AAC), m4v (H.264), ogv, oga, wav, webm.

MediaFront

Открытая бесплатная платформа (лицензия GPLv3) для внедрения плеера в веб-страницу, использует все новороты HTML5. Внедрение роликов с YouTube, Vimeo. Темы основаны на jQuery-UI ThemeRoller

JME

jme — это HTML5 аудио/видео компонент с Flash и VLC Fallback, который сфокусирован на гибком интуитивно понятном DOM-API и семантичном коде.

FlareVideo

Flare — бесплатный HTML 5 видео плеер. Темы основаны на CSS/HTML/JS. Полностью открытый исходный код. Бесплатен для коммерческого использования.

Projekktor

Projekktor обертка для новых HTML5 аудио и видео элементов. Прост в интеграции (всего один JavaScript файл). Кроссбраузерный (IE, Opera, Chrome, Safari, Firefox и другие). Поддерживает внедрение рекламы в проигрываемый ролик. Использует свободный видеокодек Theora. Есть плейлисты. Показ роликов с YouTube. Темы основаны на HTML/CSS. Бесплатен для некоммерческого и коммерческого использования (лицензия GNU GPL)

Video JS

HTML5 видео плеер. Использует современные возможности браузеров. Бесплатен. Исходный код открыт. Легковесный. Не использует картинок. Скины задаются через CSS. Есть полноэкранный режим. В старых браузерах плеер автоматически заменяется на Flowplayer. Лицензия MIT.

AmplitudeJS

Amplitude.JS — современный HTML5-аудиоплеер. Не нужно никаких зависимостей. Поддержка плейлистов, хуков, мобильных девайсов, тач устройств, SoundCloud. Дизайн полностью кастомизируется. Через этот плеер можно организовывать стримы. 2232 звезды на Github.

Источник