1. Що хорошого в плагіні MediaElement.js - HTML5 Video & Audio Player
2. Ось так виглядає аудіо-плеєр
3. Способи підключити відео, аудіо в зміст сайту
4. Спосіб підключити аудіо:
5. Налаштування плагіна MediaElement.js - HTML5 Video & Audio Player
6. висновок

Блог pixel.com працює на одній з найбільш популярною в світі системі управління контентом WordPress CMS. Як користувач цієї CMS, Я зіткнувся з проблемою, який вибрати відео-аудіо плеєр для свого блогу 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 ось таким способом:

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

Для оформлення посвідки плеєра існує три скіна:

1. Defaul - цей скін за умовчанням буде відображати після активації плагіна. Cкін за замовчуванням плагіна MediaElement.js - HTML5 Video & Audio Player.
2. WMP - трохи красивіше, але на смак і колір товаришів немає. Скін WMP для, MediaElement.js - HTML5 Video & Audio Player
3. TED - відмінність у тому що панель управління на сірому тлі, цей скін підходить для сайтів з таким оформленням. Скін TED для плеєра MediaElement.js - HTML5 Video & Audio Player

Ось так виглядає аудіо-плеєр

Способи підключити відео, аудіо в зміст сайту

Спосіб підключити відео:

Спосіб підключити аудіо:

mp4, fly, ogg, webm - формати відео

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

mp3, ogg - формат аудіо

preload = "true" - швидке завантаження відео

autoplay = "true" - авто-відтворення відео / аудіо

І останні підключення, це в сам шаблон сайту, ось таким способом;

Подробиці на сторінці плагіна, офіційного сайту

Якщо шорткод video і audio конфліктує, можна підключити іншим шорткодом, що працює так само:

Налаштування плагіна MediaElement.js - HTML5 Video & Audio Player

Як бачите налаштувань не багато, є один нюанс в розмірах відео і аудіо плеєра. Якщо в налаштуваннях вказати ширину і висоту 100% то ширина відеоплеєра буде відображатися за розміром блоку контенту, а висота збереже пропорції відео, що дасть змінну ширину і висоту. Такі розміри зазвичай підходять для перегляду відео на мобільних пристроях. Але це тільки стандартні параметри для плеєра. Якщо потрібні інші розміри відео, то вказуємо їх безпосередньо при підключенні відео:

Вибір скіна за вами, дивіться знімок вище.

висновок

Загалом плагін MediaElement.js - HTML5 Video & Audio Player хороший. Він простий в налаштуваннях і в підключенні відео / аудіо на сторінки сайту і в сам шаблон. І найголовніше працює на основних браузерах інтернету. А яка ваша думка про плеєр?