Статьи

Как добавить Stellar Video Player на ваш сайт WordPress

Нельзя отрицать, что при выборе, большинство пользователей Интернета сегодня предпочли бы посмотреть короткое видео, а не прочитать несколько абзацев текста. Поэтому одним из лучших способов быстро увеличить трафик и рейтинг кликов на вашем сайте WordPress является добавление к нему видеоконтента. Для отображения такого контента вам, конечно, понадобится гибкий видеоплеер.

Stellar Video Player , премиальный плагин для WordPress, доступный на CodeCanyon, является одним из самых мощных и настраиваемых видеоплееров, которые вы можете получить в 2019 году. Созданный отмеченным наградой автором Envato Creative Media , этот плагин поддерживает различные форматы видео, несколько популярные услуги видеохостинга, а также прямой эфир.

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

Чтобы следовать, все, что вам нужно, это:

Плагин Stellar Video Player WordPress доступен в качестве премиального элемента на CodeCanyon.

Звездный видеоплеер на CodeCanyon

Купив лицензию на нее, вы сможете скачать ее в виде ZIP-файла, который содержит как исходный код, так и документацию.

После того, как вы извлечете ZIP-файл, вы получите доступ к архиву плагина с именем Stellar-video-player.zip , с помощью которого вы можете установить плагин всего за несколько кликов.

Начните с открытия админ-панели вашего сайта WordPress и перехода к плагинам> Добавить новый раздел. Затем нажмите кнопку « Загрузить плагин» и выберите архив плагинов.

Экран установки плагина

Наконец, нажмите кнопку Установить сейчас , чтобы начать установку.

После успешной установки обязательно нажмите на ссылку « Активировать», показанную под плагином, чтобы активировать его.

С этого момента вы можете начать использовать плагин.

Плагин Stellar Video Player позволяет создавать несколько видеоплееров для вашего сайта WordPress. У каждого игрока будет свой уникальный шорткод, который вы можете использовать, чтобы встроить его в свои посты или страницы.

Чтобы создать свой первый плеер, выберите «Настройки»> «Звездный видеоплеер» в панели администратора.

На открывшейся странице нажмите кнопку « Создать нового игрока» .

Экран управления плеером

Теперь вам будет предложено указать тип видео, которое вы хотите, чтобы ваш новый плеер воспроизводил. В настоящее время Stellar Video Player может воспроизводить видео, размещенные на хосте, видео с YouTube и видео с Vimeo.

А пока давайте создадим проигрыватель, который может воспроизводить файлы MP4, к которым у вас есть прямой доступ. Поэтому выберите вариант HTML5 (самостоятельно размещенный) и нажмите кнопку « Добавить видео» .

Экран настроек видео

В появившейся панели конфигурации вы должны указать проигрывателю свое собственное видео. Не стесняйтесь использовать URL любого файла MP4, который присутствует на вашем сервере WordPress. Кроме того, вы можете использовать файлы MP4, которые есть на облачных платформах, таких как Google Drive, Amazon S3 и Dropbox.

Стоит отметить, что плагин Stellar Video Player позволяет указывать два URL для одного и того же видео: один для версии с качеством HD, а другой для версии с качеством SD. Предоставляя обе версии, вы можете быть уверены, что ваши пользователи будут работать оптимально, даже если у них медленное интернет-соединение.

Затем вы должны добавить заголовок и описание к вашему видео. При желании вы даже можете связать миниатюрное изображение с ним.

Подробности конфигурации собственного видео

Оставьте остальные поля без изменений и нажмите кнопку Сохранить изменения .

Если вы хотите добавить больше видео к тому же плееру, нажмите кнопку « Добавить видео» еще раз.

Теперь, когда ваш первый видеопроигрыватель готов, вы можете вернуться на панель инструментов плагина Stellar Video Player и взглянуть на его шорткод.

Список игроков

Обратите внимание, что этот плагин WordPress всегда генерирует легко запоминающиеся шорткоды на основе идентификатора игрока. Например, если идентификатор вашего игрока равен 1 , его шорткод будет [Stellar_video_player id="1"] .

Чтобы добавить плеер к любому сообщению на вашем сайте, все, что вам нужно сделать, это ввести шорткод в нужном месте. Вот скриншот, показывающий как:

Добавление шорткода в пост

После того, как вы опубликуете сообщение и посетите его, вы сможете увидеть своего нового игрока в действии.

Видео проигрыватель, воспроизводящий видео

Если вас не устраивает текущий внешний вид видеоплеера, вы можете настроить его, перейдя на страницу настроек проигрывателя , где вы получите доступ к десяткам параметров конфигурации. Например, в разделе « Общие параметры » можно изменить такие сведения, как соотношение сторон проигрывателя, размер его индикатора выполнения, отображаемые элементы управления и его размеры.

Раздел общих опций

Если вы хотите изменить общую тему вашего плеера, вы должны перейти в раздел Layout & Design . В настоящее время этот плагин предлагает две полноценных темы: темную тему и светлую тему. Плеер, созданный на предыдущем шаге, по умолчанию использует темную тему. Вот как это будет выглядеть, если вы переключитесь на светлую тему.

Видеоплеер со светлой темой

Кроме того, в том же разделе вы можете изменить цвет акцента, который использует игрок.

В разделе « Функциональность » вы можете настроить поведение плеера после завершения воспроизведения видео. По умолчанию он воспроизводит следующее видео в своем плейлисте.

Наконец, если вы не хотите, чтобы пользователи могли легко загружать ваши видео, вы можете перейти в раздел проигрывателя HTML5 и включить опцию « Скрыть источник видео» .

С помощью плагина Stellar Video Player монетизация ваших видео чрезвычайно проста, поскольку она позволяет добавлять к ним разнообразную рекламу.

В настоящее время плагин позволяет добавлять следующие объявления в любое из ваших видео, размещенных на собственном хостинге:

  • видеообъявление перед началом ролика, которое воспроизводится до запуска вашего видео
  • видео ролик в середине ролика, который показывается во время длинного видео
  • видеообъявление после ролика, которое воспроизводится после видео
  • всплывающее графическое объявление, которое может быть показано в любое время во время видео

Чтобы показать эти объявления, перейдите в раздел настроек видео вашего плеера. Здесь у каждого типа рекламы есть три важных поля формы: переключатель для включения или выключения рекламы, поле ввода, где вы можете ввести URL-адрес, на который пользователи будут перенаправляться при нажатии на объявление, и поле ввода. где вы можете указать местоположение файла MP4 объявления.

Настройки предварительной рекламы

При желании, если вы хотите, чтобы ваши пользователи пропускали просмотр рекламы через несколько секунд, вы можете использовать поле Пропустить таймер (сек) .

После заполнения полей завершите их, нажав кнопку Сохранить изменения . Если вы вернетесь в свой блог сейчас, вы увидите, что ваш проигрыватель воспроизводит рекламные файлы MP4 в соответствующее время.

Плеер, показывающий рекламу

Плеер, созданный вами ранее, может обрабатывать только те видео, к которым у вас есть прямой доступ к файлам. Если вы хотите отображать видео YouTube или Vimeo в своем блоге, вам нужно будет создать проигрыватель другого типа.

Чтобы создать отдельный проигрыватель для видео YouTube, снова нажмите кнопку « Создать нового проигрывателя» на странице управления проигрывателем. На этот раз в разделе « Настройки видео » выберите параметр YouTube и нажмите кнопку « Добавить видео» .

Вы увидите, что теперь вам представлена ​​немного другая форма конфигурации. В этой форме вы указываете видео, которое хотите воспроизвести, введя его уникальный идентификатор YouTube. Кроме того, вы можете указать, какую часть видео вы хотите воспроизвести, используя начало на втором и конец на вторых полях.

Настройка видео проигрывателя YouTube

Остальные параметры конфигурации идентичны параметрам проигрывателя с автоматическим размещением. Это означает, что вы можете добавить к видео различные рекламные объявления, собственный эскиз и заголовок.

Как всегда, отправьте форму, нажав кнопку « Сохранить изменения» .

Если вы вставите этого игрока в пост, он будет выглядеть так:

Видеоплеер с видео на YouTube

Если вы хотите, чтобы этот проигрыватель воспроизводил более одного видео, вы можете вернуться на страницу настроек видео и снова нажать кнопку « Добавить видео» . Однако, если вы хотите воспроизвести много видео на YouTube, вы можете сэкономить время и усилия, используя проигрыватель другого типа.

Плагин Stellar Video Player позволяет легко встраивать весь плейлист из видео YouTube или даже все видео с канала YouTube. Чтобы создать проигрыватель, который поддерживает эту функцию, вы должны выбрать опцию плейлиста YouTube или опцию канала YouTube при создании плеера. Затем все, что вам нужно сделать, это ввести идентификатор списка воспроизведения или идентификатор канала.

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

Плагин Stellar Video Player позволяет воспроизводить видео и в модальном окне. Использование этой функции может привести к улучшению взаимодействия с пользователем, поскольку она затемняет остальную часть страницы и позволяет пользователю сосредоточиться только на видео.

Чтобы включить эту функцию, перейдите в раздел « Настройки проигрывателя»> «Параметры лайтбокса » любого созданного вами плеера и включите опцию « Режим лайтбокса» . После этого ваш видеоплеер будет выглядеть так:

Видеоплеер с лайтбоксом

Из этого руководства вы узнали, как интегрировать плагин Stellar Video Player WordPress с вашим сайтом WordPress. Вы также узнали, как отображать видео, плейлисты и рекламные объявления с ним без написания единой строки кода.

Плееры, которые вы создаете с помощью этого плагина WordPress, хорошо выглядят практически во всех современных браузерах, как настольных, так и мобильных. Они тоже очень легкие.

Чтобы узнать больше о плагине, обратитесь к документации, представленной в загруженном вами ZIP-файле.

Если вы хотите узнать больше о плагинах видеоплеера для WordPress, ознакомьтесь с некоторыми другими нашими публикациями здесь на Envato Tuts +.

  • WordPress
    20 WordPress видео плагинов и игроков, чтобы добавить вовлечение
    Рэйчел Макколлин
  • WordPress
    15 лучших плагинов для WordPress Audio Player и Video Player
    Джейн Бейкер
  • WordPress
    Лучшие видео фоновые плагины для WordPress
    Нона Блэкман