Серед усіх нових можливостей у релізі WordPress 3.6 окремо хочеться відзначити одну "фішку", яка сподобається багатьом блогерам. Мова йде про нативної підтримки для аудіо- та відео-файлів у новій версії движка. Така опція може дуже змінити ситуацію з використанням медіа-контенту в блогах. У цьому пості ми поговоримо про те, як нові можливості роботи з відео та звуком можна застосувати в рамках вашого WordPress-сайту. Але спочатку давайте згадаємо, як раніше нам доводилося працювати з мультимедіа-вмістом для сайтів та блогів.
Дивіться також:
Давним давно…
Якщо ви займаєтеся підкастами або ведете відео-блог, то раніше на вашому WordPress-сайті треба було встановлювати плагін для відтворення створеного відео або записаного аудіо.
Наприклад, якщо ви збиралися завантажити відеоролик, то ось як зазвичай у вас виглядав екран редагування та створення нового посту WordPress з таким контентом:
Вставка завантаженого відео закінчувалася тим, що в пості з'являлося активне посилання без будь-якого програвача для файлу
Як бачите, ніякого програвача для файлів не було, тільки посилання. Коли я вперше зіткнувся з цією суворою реальністю, то почав шукати відповідний плагін для відображення медіа-контенту у програвачі.
Звичайно, завжди можна скористатися інструментарієм сторонніх сервісів на зразок YouTube и Vimeo, які дозволяють легко вбудувати вже завантажені ролики WordPress. Але що робити, якщо хочете розміщувати мультимедіа-контент на власних серверах? Раніше вирішити це завдання можна було лише за допомогою плагінів.
Попередній перегляд медіа-контенту WordPress 3.6
Нижче наведено попередній огляд того, як ви можете завантажити відеоролик у новому пості для WordPress 3.6. Також представлений зовнішній вигляд для вибору форматів нового посту:
Доступна опція вставки коду зі стороннього джерела або завантаження вашого власного файлу
Тепер у користувачів є однозначне уявлення про те, що саме слідує за кожною конкретною дією. Наприклад, вибравши "ВідеоВам більше не доведеться гадати, як саме відео-ролик додасться у ваш пост і як буде відображатися. Ви або вибираєте адресу до вже завантаженого відео-ролика на сторонньому сервісі, або завантажуєте файл на власний сервіс. Шорт-код створюється при цьому автоматично , а для користувачів результат відображатиметься в наступному вигляді:
Робота з відео та аудіо-роликами стала простішою та зрозумілішою. Тепер вам не доведеться шукати медіа-програвач, а всі ваші файли відтворюються відразу після завантаження та додавання їх до постів.
Що "під капотом"?
Деяким з наших читачів уже знайомий скрипт MediaElement.jsможливо, ви навіть ним користувалися у складі плагіна для WordPress. Є ціла низка причин, з яких можна вибрати MediaElement.js, але ключові причини, чому цей скрипт ліг в основу додавання медіа-файлів, є:
- Відмінна підтримка всіх основних браузерів та пристроїв.
- MediaElement.js використовує ту саму розмітку HTML для всіх типів вбудовування відео.
- Всі програвачі досить легко адаптувати до загального дизайну або шаблону оформлення сайту, застосувавши таблицю CSS.
Якщо вас цікавить, наскільки широка підтримка пристроїв і браузерів, самі перегляньте таблицю сумісності для MediaElement.js:
MediaElement.js та версії браузерів та пристроїв, які він підтримує "з коробки"
Параметри MediaElement.js:
- Плеєри для аудіо- та відеофайлів на основі HTML5 з підтримкою CSS.
- Програвачі Flash і Silverlight, що налаштовуються, що імітують HTML5 MediaElement API для старих браузерів.
- Гнучкі стандарти доступу, включаючи WebVTT.
Найкрутіше у всіх цих плеєрах - будь-яка людина без найменших знань у програмуванні шляхом кількох рядків коду в таблиці CSS може "підігнати" оформлення плеєра під загальний дизайн свого сайту, не витрачаючи на це багато часу та ресурсів. Ви можете повністю контролювати поведінку та формати відображення програвача для завантажуваних файлів.
Чим нативна підтримка відео та аудіо-контенту полегшує життя
Пошук відповідного плагіна для відео або аудіо може стати непростим завданням, особливо для новачка. Крім сумісності таких плагінів з вашим движком та браузерами користувачів, вам ще треба навчитися, як таким плагіном правильно користуватися.
Нативний програвач дозволяє уникнути всього цього "головного болю" і просто приступити до завантаження і застосування контенту без зайвих витрат на використання, налаштування та вивчення. Стане простіше не тільки адміністраторам та блогерам, а й пересічним користувачам та читачам вашого сайту чи блогу. Широка підтримка різних браузерів та пристроїв – головний "плюс" нативного програвача для мультимедіа-контенту. Радий, що цю "фішку" нарешті впровадили.
Сторонні сервіси на кшталт YouTube та Vimeo вам більше не потрібні
Якщо ви зняли короткий ролик на свій смартфон, то тепер його можна просто та швидко вивантажити у свій блог на WordPress. Аналогічно можуть чинити всі, хто веде відео-блог, музиканти, подкастери, журналісти та редакції онлайн-ЗМІ. Сторонні сервіси та плагіни були складними в налаштуванні, але все це в минулому. Починаючи з версії WordPress 3.6Вам достатньо зробити пару кліків мишкою - і ролик побачать ваші читачі.
Нативна сумісність з великою кількістю пристроїв та браузерів - запорука того, що нова "фішка" від WordPress буде популярна у користувачів і дасть поштовх мультимедіа-блогінгу. А ви вже скуштували нативний програвач для мультимедіа-файлів у WordPress 3.6?
Коментарі до запису: 9
Чудову функцію додали.
Скажіть, будь ласка, а як ви так зробили, що у вас збоку на кнопках підписок спливають віджети груп та інші. Просто самого дуже зацікавило.
Все зроблено за допомогою CSS
А як саме, просто я взагалі не уявляю, як там можна зробити =)
Якось ви погарячкували, що сторонні сервіси на кшталт youtube і vimeo більше не потрібні. Навантаження на хостинг ще ніхто не скасовував, а новий «вбудований» механізм, напевно, вміє працювати тільки з файлами, завантаженими безпосередньо на сайт.
Краще б можливість зберігання медіа-контенту у хмарі додали — ось чого справді не вистачає.
Можна вказати посилання на файл, розміщений на іншому хостингу.
вітаю, є питання з приводу вбудованого в двигун програвача, не підкажете що і як відредагувати, для того, щоб у вікні програвача відображалася назва файлу, що програється?
На жаль, не в курсі.
Рекомендую докладний урок зі створення свого відеоплеєра із застосуванням MediaElement.js http://siteacademy.ru/index.php/jquery/40-jquery/video-player