Плеер для WordPress

Видео и аудиоплеер для WordPress в одном плагине. Уверен, многие сталкивались с выбором плеера для сайта.

Оглавление:
  1. Видео и аудио плеер на странице сайта
  2. Настройки плагина

Первое что я сделал, в админке раздела плагины нажал кнопку Добавить новый в строке поиска вставил слово player. Результат поиска меня не удивил, 17 страниц, и на каждой странице в названии плагина присутствует слово player. Если на одной странице 30 результатов поиска, 30 умножить 17 равно 510 плагинов для проверки, какой плеер из 510 штук подходит для сайта лучше всех остальных. Мало кто решиться визуально проверять каждый плеер.

Чтобы сократить список найденных результатов, можно прочесть описание или детали плагина, откинуть варианты плагина где только видеоплеер, потому что нам нужен аудио и видеоплеер и лучше всего когда это будет в одном плагине. Мой выбор остановился на плагине MediaElement.js — HTML5 Video & Audio Player.

И сразу напишу его недостатки, их очень мало:

  1. Нет возможности отображения кадра с видео для афиши плеера, но есть способ подключить внешний файл вот таким способом:
    video poster="http://mysite.com/mymedia.png"

    Возможно для кого то это не вопрос, а для меня лишний файл с изображением не нужен.

  2. Второй недостаток не так уж и важен, но всё таки таблица стилей css плеера, составлена с ошибками. Их можно исправить, но после обновления плагина возможно надо будет снова редактировать таблицу стилей css.
  3. Видео с таким адресом http://youtu.be/TdiprYNxwY4DVrtnftFRH не работает, это означает что видео с youtu не будет проигрываться. Но уже есть решение oEmbed для облегчения вставки с сайтов, таких как YouTube и Slideshare с версии WordPress 4.4

Что хорошего в плагине MediaElement.js — HTML5 Video & Audio Player

Плеер будет работать на старых браузерах с помощью Flash и Silverlight. Даже если вы подключите видео в hd формате mp4 или формат аудио mp3 вот таким способом:

video src="http://site.ru/video.mp4"
video src="http://site.ru/audio.mp3"

видео и аудио будет проигрываться на старых браузерах с одинаковым оформлением. Это большой плюс плееру MediaElement.js.

Три скина для видеоплеера:

  1. Defaul — этот скин по умолчанию будет отображать после активации плагина.

    MediaElement.js - HTML5 Video & Audio Player
    Cкин по умолчанию плагина MediaElement.js — HTML5 Video & Audio Player.
  2. WMP — немного красивее, но на вкус и цвет товарищей нет.

    MediaElement.js - HTML5 Video & Audio Player
    Скин WMP для, MediaElement.js — HTML5 Video & Audio Player
  3. TED — отличие в том что панель управления на сером фоне, этот скин подходит для сайтов с таким оформлением.

    MediaElement.js - HTML5 Video & Audio Player
    Скин TED для плеера MediaElement.js — HTML5 Video & Audio Player

Аудиоплеер

MediaElement.js - HTML5 Video & Audio Player
Вид аудио-плеера по умолчанию плагина MediaElement.js — HTML5 Video & Audio Player

Видео и аудио плеер на странице сайта

Вывести видео:

video mp4="http://mysite.com/mymedia.mp4"
ogg="http://mysite.com/mymedia.ogg"
src="http://mysite.com/mymedia.fly"
webm="http://mysite.com/mymedia.webm"
poster="http://mysite.com/mymedia.png"
poster="http://mysite.com/mymedia.jpg"
preload="true" autoplay="true" width="640" height="264"

Вывести аудио:

audio src="http://mysite.com/mymedia.mp3"
mp3="http://mysite.com/mymedia.mp3"
ogg="http://mysite.com/mymedia.ogg"
preload="true" autoplay="true"

mp4, fly, ogg, webm — форматы видео

png, jpg — изображение для афиши

mp3, ogg — формат аудио

preload="true" — быстрая загрузка видео

autoplay="true" — автовоспроизведение видео/аудио

В шаблон сайта:

<?php echo do_shortcode('video src="myvfile.mp4"'); ?>

Подробности на странице плагина, официального сайта WordPress

Если шорткод video и audio конфликтует, можно подключить другим шорткодом, работающий так же:

mejsaudio src="http://mysite.com/audio.mp3"
mejsvideo src="http://mysite.com/video.mp4"
к меню ↑

Настройки плагина

MediaElement.js - HTML5 Video & Audio Player
Настройки плагина MediaElement.js — HTML5 Video & Audio Player

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

src="http://mysite.com/mymedia.fly" width="640" height="264"

Выбор скина за вами.