Нельзя отрицать, что при выборе, большинство пользователей Интернета сегодня предпочли бы посмотреть короткое видео, а не прочитать несколько абзацев текста. Поэтому одним из лучших способов быстро увеличить трафик и рейтинг кликов на вашем сайте WordPress является добавление к нему видеоконтента. Для отображения такого контента вам, конечно, понадобится гибкий видеоплеер.
Stellar Video Player , премиальный плагин для WordPress, доступный на CodeCanyon, является одним из самых мощных и настраиваемых видеоплееров, которые вы можете получить в 2019 году. Созданный отмеченным наградой автором Envato Creative Media , этот плагин поддерживает различные форматы видео, несколько популярные услуги видеохостинга, а также прямой эфир.
В этом уроке я покажу вам, как добавить его на свой сайт WordPress и отображать с ним различные типы видеоконтента.
Предпосылки
Чтобы следовать, все, что вам нужно, это:
- WordPress 4.4.1 или выше
- учетная запись CodeCanyon
1. Установка Stellar Video Player
Плагин Stellar Video Player WordPress доступен в качестве премиального элемента на CodeCanyon.
Купив лицензию на нее, вы сможете скачать ее в виде ZIP-файла, который содержит как исходный код, так и документацию.
После того, как вы извлечете ZIP-файл, вы получите доступ к архиву плагина с именем Stellar-video-player.zip , с помощью которого вы можете установить плагин всего за несколько кликов.
Начните с открытия админ-панели вашего сайта WordPress и перехода к плагинам> Добавить новый раздел. Затем нажмите кнопку « Загрузить плагин» и выберите архив плагинов.
Наконец, нажмите кнопку Установить сейчас , чтобы начать установку.
После успешной установки обязательно нажмите на ссылку « Активировать», показанную под плагином, чтобы активировать его.
С этого момента вы можете начать использовать плагин.
2. Создание нового игрока
Плагин 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. Предоставляя обе версии, вы можете быть уверены, что ваши пользователи будут работать оптимально, даже если у них медленное интернет-соединение.
Затем вы должны добавить заголовок и описание к вашему видео. При желании вы даже можете связать миниатюрное изображение с ним.
Оставьте остальные поля без изменений и нажмите кнопку Сохранить изменения .
Если вы хотите добавить больше видео к тому же плееру, нажмите кнопку « Добавить видео» еще раз.
3. Использование проигрывателя
Теперь, когда ваш первый видеопроигрыватель готов, вы можете вернуться на панель инструментов плагина Stellar Video Player и взглянуть на его шорткод.
Обратите внимание, что этот плагин WordPress всегда генерирует легко запоминающиеся шорткоды на основе идентификатора игрока. Например, если идентификатор вашего игрока равен 1
, его шорткод будет [Stellar_video_player id="1"]
.
Чтобы добавить плеер к любому сообщению на вашем сайте, все, что вам нужно сделать, это ввести шорткод в нужном месте. Вот скриншот, показывающий как:
После того, как вы опубликуете сообщение и посетите его, вы сможете увидеть своего нового игрока в действии.
4. Настройка проигрывателя
Если вас не устраивает текущий внешний вид видеоплеера, вы можете настроить его, перейдя на страницу настроек проигрывателя , где вы получите доступ к десяткам параметров конфигурации. Например, в разделе « Общие параметры » можно изменить такие сведения, как соотношение сторон проигрывателя, размер его индикатора выполнения, отображаемые элементы управления и его размеры.
Если вы хотите изменить общую тему вашего плеера, вы должны перейти в раздел Layout & Design . В настоящее время этот плагин предлагает две полноценных темы: темную тему и светлую тему. Плеер, созданный на предыдущем шаге, по умолчанию использует темную тему. Вот как это будет выглядеть, если вы переключитесь на светлую тему.
Кроме того, в том же разделе вы можете изменить цвет акцента, который использует игрок.
В разделе « Функциональность » вы можете настроить поведение плеера после завершения воспроизведения видео. По умолчанию он воспроизводит следующее видео в своем плейлисте.
Наконец, если вы не хотите, чтобы пользователи могли легко загружать ваши видео, вы можете перейти в раздел проигрывателя HTML5 и включить опцию « Скрыть источник видео» .
5. Добавление рекламы
С помощью плагина Stellar Video Player монетизация ваших видео чрезвычайно проста, поскольку она позволяет добавлять к ним разнообразную рекламу.
В настоящее время плагин позволяет добавлять следующие объявления в любое из ваших видео, размещенных на собственном хостинге:
- видеообъявление перед началом ролика, которое воспроизводится до запуска вашего видео
- видео ролик в середине ролика, который показывается во время длинного видео
- видеообъявление после ролика, которое воспроизводится после видео
- всплывающее графическое объявление, которое может быть показано в любое время во время видео
Чтобы показать эти объявления, перейдите в раздел настроек видео вашего плеера. Здесь у каждого типа рекламы есть три важных поля формы: переключатель для включения или выключения рекламы, поле ввода, где вы можете ввести URL-адрес, на который пользователи будут перенаправляться при нажатии на объявление, и поле ввода. где вы можете указать местоположение файла MP4 объявления.
При желании, если вы хотите, чтобы ваши пользователи пропускали просмотр рекламы через несколько секунд, вы можете использовать поле Пропустить таймер (сек) .
После заполнения полей завершите их, нажав кнопку Сохранить изменения . Если вы вернетесь в свой блог сейчас, вы увидите, что ваш проигрыватель воспроизводит рекламные файлы MP4 в соответствующее время.
6. Встраивание видео YouTube
Плеер, созданный вами ранее, может обрабатывать только те видео, к которым у вас есть прямой доступ к файлам. Если вы хотите отображать видео YouTube или Vimeo в своем блоге, вам нужно будет создать проигрыватель другого типа.
Чтобы создать отдельный проигрыватель для видео YouTube, снова нажмите кнопку « Создать нового проигрывателя» на странице управления проигрывателем. На этот раз в разделе « Настройки видео » выберите параметр YouTube и нажмите кнопку « Добавить видео» .
Вы увидите, что теперь вам представлена немного другая форма конфигурации. В этой форме вы указываете видео, которое хотите воспроизвести, введя его уникальный идентификатор YouTube. Кроме того, вы можете указать, какую часть видео вы хотите воспроизвести, используя начало на втором и конец на вторых полях.
Остальные параметры конфигурации идентичны параметрам проигрывателя с автоматическим размещением. Это означает, что вы можете добавить к видео различные рекламные объявления, собственный эскиз и заголовок.
Как всегда, отправьте форму, нажав кнопку « Сохранить изменения» .
Если вы вставите этого игрока в пост, он будет выглядеть так:
Если вы хотите, чтобы этот проигрыватель воспроизводил более одного видео, вы можете вернуться на страницу настроек видео и снова нажать кнопку « Добавить видео» . Однако, если вы хотите воспроизвести много видео на YouTube, вы можете сэкономить время и усилия, используя проигрыватель другого типа.
Плагин Stellar Video Player позволяет легко встраивать весь плейлист из видео YouTube или даже все видео с канала YouTube. Чтобы создать проигрыватель, который поддерживает эту функцию, вы должны выбрать опцию плейлиста YouTube или опцию канала YouTube при создании плеера. Затем все, что вам нужно сделать, это ввести идентификатор списка воспроизведения или идентификатор канала.
7. Использование лайтбокса
Плагин Stellar Video Player позволяет воспроизводить видео и в модальном окне. Использование этой функции может привести к улучшению взаимодействия с пользователем, поскольку она затемняет остальную часть страницы и позволяет пользователю сосредоточиться только на видео.
Чтобы включить эту функцию, перейдите в раздел « Настройки проигрывателя»> «Параметры лайтбокса » любого созданного вами плеера и включите опцию « Режим лайтбокса» . После этого ваш видеоплеер будет выглядеть так:
Вывод
Из этого руководства вы узнали, как интегрировать плагин Stellar Video Player WordPress с вашим сайтом WordPress. Вы также узнали, как отображать видео, плейлисты и рекламные объявления с ним без написания единой строки кода.
Плееры, которые вы создаете с помощью этого плагина WordPress, хорошо выглядят практически во всех современных браузерах, как настольных, так и мобильных. Они тоже очень легкие.
Чтобы узнать больше о плагине, обратитесь к документации, представленной в загруженном вами ZIP-файле.
Если вы хотите узнать больше о плагинах видеоплеера для WordPress, ознакомьтесь с некоторыми другими нашими публикациями здесь на Envato Tuts +.