Аудио и видео плеер для WordPress

Блог pixel.com работает на одной из самых популярной в мире системе управление контентом WordPress CMS. Как пользователь этой CMS, Я столкнулся с проблемой, какой выбрать видео-аудио плеер для своего блога WordPress. Уверен что многие сталкивались с выбором плеера для сайта, по этому постараюсь проще описать, свой выбор без теорий, схем, терминов.

Выбрать плеер для WordPress

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

Что хорошего в плагине 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://pixelcom.crimea.ua/"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=
http://pixelcom.crimea.ua/"myvfile.mp4"'); ?>


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

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



mejsaudio src=
http://pixelcom.crimea.ua/"http://mysite.com/audio.mp3"




mejsvideo src=
http://pixelcom.crimea.ua/"http://mysite.com/video.mp4"


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

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

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



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


Выбор скина за вами, смотрите снимок выше.

Заключение

В общем плагин MediaElement.js — HTML5 Video & Audio Player хорош. Он прост в настройках и в подключении видео/аудио на страницы сайта и в сам шаблон. И самое главное работает на основных обозревателях интернета. А какое ваше мнение о плеере?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>