Установка плейера Plyr
Скачиваем плеер Plyr:
Подключаем CSS
файл с вашего сайта:
| 1 | rel=»stylesheet» href=»/path/to/plyr.css» /> |
Или с сайта разработчика:
| 1 | rel=»stylesheet» href=»https://cdn.plyr.io/3.5.6/plyr.css» /> |
Подключаем JS
файл и инициализируем:
| 1 2 3 4 | src=»path/to/plyr.js»> const player = new Plyr(‘#player’); |
Как и CSS файл, JS можно подключить с сайта разработчика:
| 1 | src=»https://cdn.plyr.io/3.5.6/plyr.js»> |
По умолчанию, значки, используемые в элементах управления Plyr, загружаются из SVG спрайта, который находится по адресу: https://cdn.plyr.io/3.5.6/plyr.svg
Для подключения нескольких плееров используется:
const players = Array.from(document.querySelectorAll(‘.js-player’)).map(p => new Plyr(p));
или
const players = Plyr.setup(‘.js-player’);
Оба варианта вернут массив в порядке их нахождения в документе.
1.VideoJS
VideoJS– это бесплатный, адаптивный видеоплеер с открытым исходным кодом.Он способен использовать Flash или другую технологию воспроизведения онлайн-видео (например, Silverlight).
Плеер включает в себя базовый функционал для воспроизведения: автоматический старт и предварительную загрузку. Он также использует JavaScript для реализации кроссбраузерности.
Это лучший бесплатный видеоплеер для публикации видео. Он также реализован в виде плагина для WordPress.
Особенности:
- Шаблонизатор – построен на основе HTML и CSS. Вы также можете использовать дизайнер обложек.
- Плагины –данный видеоплеер поддерживает несколько плагинов и продвинутых форматов, таких как HLS и DASH. Список плагинов доступен на этой странице.
При помощи плагинов плеер может быть значительно усовершенствован. Некоторые расширения для этого плеера:
- Analytics – позволяет следить за событиями Google Analytics в плеере video.js.
- Playlist – реализует поддержку плейлистов в video.js.
- Brand – добавляет логотип в панель управления плеером.
- Поддержка Chromecast.
Настройки
Второй аргумент конструктора для настроек, например:
| 1 2 3 | const player = new Plyr(‘#player’, { title: ‘Название’, }); |
Параметры настроек могут быть переданы также в атрибуте data-plyr-config:
| 1 | src=»/path/to/video.mp4″ id=»player» controls data-plyr-config='{ «title»: «Название» }’> |
Список настроек:
| Настройка и ее тип | По умолчанию | Описание |
| enabled Логический тип | true | Полное отключение Plyr |
| debug Логический тип | false | Отображение отладочной информации в консоли |
| controls Массив, функция или элемент | [‘play-large’, ‘play’, ‘progress’, ‘current-time’, ‘mute’, ‘volume’, ‘captions’, ‘settings’, ‘pip’, ‘airplay’, ‘fullscreen’] | Элементы управления плеером. Подробнее: controls.md |
| settings Массив | [‘captions’, ‘quality’, ‘speed’, ‘loop’] | Если используются стандартные элементы управления, то можно указать, какие настройки будут отображаться в меню |
| i18n Объект | Подробнее defaults.js | Используется для интернационализации (i18n) текста в пользовательском интерфейсе. |
| loadSprite Логический тип | true | Загружать спрайт из настройки iconUrl. Если false, то предполагается, что загрузка спрайта обрабатывается самостоятельно. |
| iconUrl Строка | NULL | URL-адрес или путь к спрайту SVG. |
| iconPrefix Строка | plyr | Префикс идентификатора для значков, используемых в стандартных элементах управления (например, «plyr-play» будет «plyr»). Это необходимо для предотвращения конфликтов, если используется свой собственный SVG-спрайт, но с элементами управления по умолчанию. |
| blankVideo Строка | https://cdn.plyr.io/static/blank.mp4 | URL-адрес или путь к пустому видеофайлу, который используется для правильной отмены сетевых запросов. |
| autoplay Логический тип | false | Автозапуск при загрузке. Если атрибут автозапуска присутствует в элементе или , он будет автоматически установлен в true. Автозапуск не рекомендуется и отключен во многих браузерах, так как это рассматривается как отрицательное явление. |
| autopause Логический тип | true | Разрешает одновременно проигрываться только одному плееру. Применимо только для Vimeo |
| seekTime Номер | 10 | Время в секундах для перемещения, когда пользователь нажимает перемотку вперед или назад. |
| volume Номер | 1 | Число, от 0 до 1, представляющее начальный уровень звука. |
| muted Логический тип | false | Начинать воспроизведение приглушенным. Если атрибут muted присутствует в элементе или , он будет автоматически установлен в true. |
| clickToPlay Логический тип | true | Нужно ли нажатие на контейнер видео, чтобы переключать воспроизведение / паузу. |
| disableContextMenu Логический тип | true | Отключает правую кнопку мышки на контейнере с видео. |
| hideControls Логический тип | true | Скрывает элементы управления видео автоматически после 2 секунд без движения мыши |
| resetOnEnd Логический тип | false | Сброс воспроизведение до начала после его завершения. |
| keyboard Объект | { focused: true, global: false } | Разрешает горячие клавиши |
| tooltips Объект | { controls: false, seek: true } | controls: Отображение подсказок элементов управления при наведии мышки |
| duration Номер | NULL | Произвольная длительность медийного файла. |
| displayDuration Логический тип | true | Отображает длительность аудио или видео |
| invertTime Логический тип | true | Отображение текущего времени в виде обратного отсчета, а не инкрементного счетчика. |
| toggleInvert Логический тип | true | Разрешает пользователям нажимать для переключения типа текущего времени (обратный или прямой отсчет). |
| listeners Объект | NULL | Позволяет привязывать прослушиватели событий к элементам управления перед обработчиками по умолчанию. |
| captions Объект | { active: false, language: ‘auto’, update: false } | Настройка для субтитров. active — переключает, если субтитры должны быть активны по умолчанию language — задает язык по умолчанию для загрузки (если имеется). ‘auto’ использует язык браузера. update — прослушивает изменения в треках и меню обновления. Это необходимо для некоторых потоковых библиотек, но может привести к невыбираемым языковым параметрам). Пример файла субтитров |
| fullscreen Объект | { enabled: true, fallback: true, iosNative: false } | Настройка для полноэкранного просмотра enabled — переключение в полноэкранный режим должен быть включен. fallback — разрешает возврат к полноэкранному виду (true/false/’force’). iosNative — использование собственного полноэкранного режима iOS при входе в него (без пользовательских элементов управления) |
| ratio Строка | NULL | Принудительное соотношение сторон для всех видео формата: ‘w:h’: ’16:9′ или ‘4:3’. Если это не указано, то по умолчанию для HTML5 и Vimeo используется собственное разрешение видео. Поскольку через SDK с YouTube размеры недоступны, то по умолчанию принудительно используется 16:9. |
| storage Объект | { enabled: true, key: ‘plyr’ } | enabled — разрешает использование локального хранилища для хранения пользовательских настроек. key — имя ключа для использования. |
| speed Объект | { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] } | Скорость воспроизведения selected — скорость воспроизведения по умолчанию. options — Параметры для отображения в меню. Большинство браузеров откажутся играть медленнее, чем 0.5. |
| quality Объект | { default: 576, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240] } | Качество видео default уровень качества по умолчанию (если он существует в ваших источниках). options варианты для отображения. |
| loop Объект | { active: false } | active — зацикливает текущее видео. Если атрибут loop присутствует в элементе or , то будет автоматически установлен в true |
| ads Объект | { enabled: false, publisherId: » } | enabled — включает рекламу. publisherId: Уникальный vi.ai ID издателя. |
| urls Объект | Смотрите источники. | Переопределение любых URL-адресов API, |
| vimeo Объект | { byline: false, portrait: false, title: false, speed: true, transparent: false } | Смотрите Vimeo опции. Некоторые из них устанавливаются автоматически на основе других параметров конфигурации, а именно: loop, autoplay, muted, gesture, playsinline |
| youtube Объект | { noCookie: false, rel: 0, showinfo: 0, iv_load_policy: 3, modestbranding: 1 } | Смотрите YouTube опции. Некоторые из них устанавливаются автоматически на основе других параметров конфигурации, а именно: autoplay, hl, controls, disablekb, playsinline, cc_load_policy, cc_lang_pref, widget_referrer |
| previewThumbnails Объект | { enabled: false, src: » } | enabled — Включает предварительный просмотр эскизов (они должны быть сгенерированы). src — должен быть или строкой или массивом строк, представляющих URL-адреса для файлов VTT, которые содержат адреса изображений. Пример VTT файла
|
Поддержка видео кодеков HTML5 в различных браузерах
Для полноты информации стоит привести следующую таблицу:
| Браузер | Google Chrome | Mozilla Firefox | Safari | Opera | Internet Explorer |
| WebM | Есть | Есть | Нет | Есть | Нет |
| H.264 | Есть | Нет | Есть | Нет | Есть |
| ogg/theora | Есть | Есть | Нет | Есть | Нет |
Как вы видите, нет универсального формата, который позволил бы воспроизводить видео во всех браузерах. Данная ситуация решается следующим способом: на сервер загружается видеофайл в нескольких форматах, а затем в теге video указываются несколько кодеков. Выглядит это примерно так:
Ваш браузер не поддерживает тег video.
Таким образом, источник видео будет подгружаться автоматически браузером при наличии подходящего кодека.
Горячие клавиши
| Key | Action |
от 0 до 9 | Пеоеместить ползунок просмотра от 0 до 90% соотв. |
Пробел | Остановить или продолжить воспроизведение |
K | Остановить или продолжить воспроизведение |
← | Прыгнуть назад на заданное кол-во секунд (настройка seekTime) |
→ | Прыгнуть вперед на заданное кол-во секунд (настройка seekTime) |
↑ | Прибавить звук |
↓ | Убавить звук |
M | Отключить или включить звук |
F | Открыть или закрыть полноэкранный режим |
C | Включить и выключить субтитры |
L | Включить и выключить воспроизведение по кругу |
2.JW Player
JW Player поддерживает воспроизведение HTML5 видео и предлагает большое количество инструментов от аналитики до настроек доступности. А также набор кнопок управления видео в HTML5. Это лучший плеер для сайта. Его также можно использовать в WordPress и как альтернативу видеоплееру YouTube.
Инструменты: JW Player, предлагает широкий набор инструментов, доступный через расширения. Плеер имеет широкие возможности настройки режимов работы и внешнего вида, а также встроенный API.
Также доступны плагины JW Player для большинства популярных CMS.
Плагины и компоненты
| Тип | Автор | Ссылка |
WordPress | Brandon Lavigne (@drrobotnik) | https://wordpress.org/plugins/plyr/ |
Angular | Simon Bobrov (@smnbbrv) | https://github.com/smnbbrv/ngx-plyr |
React | Jose Miguel Bejarano (@xDae) | https://github.com/xDae/react-plyr |
Vue | Gabe Dunn (@redxtech) | https://github.com/redxtech/vue-plyr |
Neos | Jon Uhlmann (@jonnitto) | https://packagist.org/packages/jonnitto/plyr |
Kirby | Dominik Pschenitschni (@dpschen) | https://github.com/dpschen/kirby-plyrtag |
Elite
Адаптивный настраиваемый плеер для WordPress с поддержкой рекламных форматов и воспроизведения видеороликов с YouTube, Vimeo и Google Диска.
Особенности:
- Простота установки.
- Поддержка плейлистов/каналов YouTube и Vimeo.
- Поддержка YouTube 360 VR.
- Поддержка прямых трансляций (HLS .m3u8)
- Загрузка видео на Google Диск.
- Несколько форматов рекламы: pre-roll (до видео), mid-roll (в середине), post-roll (после), всплывающая реклама.
- Поддержка форматов изображений Jpg, Png, gif.
Elmedia
Elmedia– плеер под Mac OS, воспроизводящий все типы видео в самом плеере, в том числе и онлайн. Вы сможете смотреть видео с Vimeo, Dailymotion, Facebook и т.д. А также загружать видеоролики с этих сайтов.
Особенности:
- Поддержка аппаратного ускорения.
- Вы сможете смотреть видео из YouTube, Vimeo, Dailymotion, не открывая браузер.
- Поддержка SWF (в PRO-версии).
- Создание скриншотов с видео.
- Загрузка видео (в PRO-версии).
- Опция извлечения аудио из видео.
Ultimate
10 лучших инструментов для анализа обратных ссылок конкурентов в 2018 году
Адаптивный видео/аудио плеер с функцией воспроизведения видео с YouTube или Vimeo. Он поддерживает только форматы mp4/mp3, работает на мобильных и настольных устройствах. Это платный плеер, и вы можете приобрести его здесь.
Особенности:
- Шифрование URL видео, которое позволяет скрыть адрес источника от пользователей.
- Адаптивность.
- Поддержка нескольких вариантов качества видео.
- Приватные / защищённые паролем видео.
- Поддержка HLS / m3u8 видео.
- Поддержка панорамного видео и VR.
- Функция распространения видеороликов в социальных сетях.
- Возможность добавить логотип компании в виде водяного знака.
- Опция загрузки видео.
