Как добавить медиаплеер?

add-media-player

Довольно часто на страницах музыкальных блогов или новостных порталов можно встретить медиаплееры с воспроизведением как видео-, так и аудиоконтента.

Для чего нужен медиаплеер на сайте?

Медиаплееры – это решения, которые позволяют воспроизводить медиаконтент на сайте. Вообще, показ аудио/видео на сайте делает его более информативным и восприимчивым для пользователя. Особенно этот функционал важен для новостных порталов.

Для вставки медиаконтента мы будем использовать стандартные инструменты WordPress (виджеты), которые прекрасно справляются с этой задачей. Выводить будем в сайдбаре нашего сайта. Вся дальнейшая работа будет выполнятся в разделе админ-панели Внешний вид -> Виджеты.

Вставка аудиоплеера

Для вставки музыки на сайте воспользуемся виджетом Аудио. Первым делом его необходимо перетянуть в какую-либо область сайдбара.

Вставка на сайт виджета Аудио

Поле Заголовок: позволяет дать название виджету. Для добавления аудиофайла необходимо нажать кнопку Добавить аудиозапись.

Добавление аудиофайла в виджет Аудио

Как видно из рисунка, Вы можете добавить аудио, загрузив на сайт непосредственно файл (например, MP3) или вставить сгенерированный код из внешнего сайта. За это отвечают вкладки Добавить аудиозапись и Вставить с сайта соответственно. После вставки и нажатия кнопки Добавить к виджету музыка будет проигрываться на сайте.

Вставка видеоплеера

Для вставки видео на сайт воспользуемся виджетом Видео.

Добавление видеофайла в виджет Видео

Все дальнейшие действия аналогичные. Вы также можете загрузить видеоконтент непосредственно на сайт или воспользоваться кодом, например, YouTube. Последний можно получить, нажав под видеороликом на сайте видеохостинга кнопку ПОДЕЛИТЬСЯ.

Получение кода видео на сайте YouTube

Полученный код нужно будет вставить в поле на вкладке Вставить с сайта.

Вставка кода с YouTube в виджет Видео

После нажатия кнопки Добавить к виджету можно смело проверять работу на сайте.

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

Курс WordPress-разработчик
Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров