Видео плейлисты — отличный способ улучшить пользовательский опыт на сайтах с большим количеством видео. Они позволяют удобно группировать видео и создавать последовательный просмотр, что особенно актуально для сайтов с образовательным или развлекательным контентом. В этой статье мы подробно рассмотрим, как создать настраиваемый видео плейлист в WordPress, используя как готовые плагины, так и собственные решения на PHP и JavaScript.
Почему важно использовать видео плейлисты в WordPress
Видео плейлисты помогают удерживать посетителей дольше на сайте, повышают вовлечённость и обеспечивают структурированный просмотр контента. Для сайтов, связанных с обучением, обзорами или сериалами, это критично. Кроме того, правильно реализованный плейлист улучшает SEO, так как увеличивает время сессии пользователей и снижает показатель отказов.
Однако стандартные решения WordPress не всегда подходят, особенно если нужно кастомизировать внешний вид или функциональность. В таких случаях на помощь приходят плагины или собственные разработки.
Использование плагинов для создания видео плейлистов
Существует несколько плагинов, которые позволяют быстро добавить видео плейлист на сайт без программирования. Рассмотрим самые популярные и удобные:
1. Video Gallery – YouTube Playlist, Channel Gallery by Total Soft
Этот плагин позволяет создавать красивые галереи и плейлисты с YouTube, Vimeo и собственных видеофайлов. Он поддерживает адаптивный дизайн и множество настроек отображения.
Ключевые особенности:
- Автоматическое создание плейлистов из YouTube каналов
- Поддержка кастомных видео из медиатеки WordPress
- Управление внешним видом через настройки
2. WP Video Lightbox
Плагин, который позволяет открывать видео в модальном окне, поддерживает плейлисты и легко интегрируется с шорткодами.
Пример использования шорткода для плейлиста:
[video_lightbox_youtube playlist="VIDEO_ID1,VIDEO_ID2,VIDEO_ID3"]Где VIDEO_ID1 и т.д. — идентификаторы видео из YouTube.
3. FV Flowplayer Video Player
Плагин с мощным видеоплеером, поддерживающим создание плейлистов из локальных видеофайлов или внешних URL. Позволяет гибко настраивать внешний вид и поведение плеера.
Создание собственного видео плейлиста с использованием кода в WordPress
Если вы хотите полный контроль над функционалом и дизайном, можно создать видео плейлист самостоятельно. Для этого потребуется написать PHP и JavaScript код с интеграцией в тему или плагин WordPress.
Основные этапы создания видео плейлиста
- Создание кастомного шорткода для вывода плейлиста.
- Подготовка HTML-разметки с контейнером для плеера и списком видео.
- Добавление JavaScript для переключения видео по клику.
Пример реализации шорткода для видео плейлиста
Добавьте следующий код в файл functions.php вашей активной темы или в собственный плагин:
function omni_video_create_playlist_shortcode($atts) {
$videos = [
[
'title' => 'Видео 1',
'url' => 'https://www.youtube.com/embed/dQw4w9WgXcQ'
],
[
'title' => 'Видео 2',
'url' => 'https://www.youtube.com/embed/oHg5SJYRHA0'
],
[
'title' => 'Видео 3',
'url' => 'https://www.youtube.com/embed/3JZ_D3ELwOQ'
]
];
ob_start();
?>
<div id="omni-video-player">
<iframe id="omni-video-frame" width="640" height="360" src="<?php echo esc_url($videos[0]['url']); ?>" frameborder="0" allowfullscreen></iframe>
<ul id="omni-video-playlist">
<?php foreach ($videos as $index => $video): ?>
<li data-src="<?php echo esc_url($video['url']); ?>"><?php echo esc_html($video['title']); ?></li>
<?php endforeach; ?>
</ul>
</div>
<style>
#omni-video-playlist { list-style: none; padding: 0; margin-top: 10px; }
#omni-video-playlist li { cursor: pointer; padding: 5px; background: #f0f0f0; margin-bottom: 5px; }
#omni-video-playlist li:hover { background: #ddd; }
#omni-video-playlist li.active { background: #bbb; font-weight: bold; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const playlistItems = document.querySelectorAll('#omni-video-playlist li');
const iframe = document.getElementById('omni-video-frame');
playlistItems.forEach(item => {
item.addEventListener('click', function() {
playlistItems.forEach(el => el.classList.remove('active'));
this.classList.add('active');
iframe.src = this.getAttribute('data-src');
});
});
// Установим первый элемент активным
if (playlistItems.length > 0) {
playlistItems[0].classList.add('active');
}
});
</script>
<?php
return ob_get_clean();
}
add_shortcode('omni_video_playlist', 'omni_video_create_playlist_shortcode');Этот код создаёт простой плейлист из трёх видео с возможностью переключения по клику на названия. Выводится iframe с видео и список под ним. Активный элемент подсвечивается.
Расширение функционала собственного видео плейлиста
Чтобы сделать плейлист более удобным и современным, можно добавить следующие возможности:
- Автоматическое переключение видео после окончания текущего. Для этого нужно слушать событие
endedHTML5 плеера и переключать iframe на следующий URL. - Поддержка локальных видеофайлов. Вместо iframe можно использовать
<video>с атрибутомsrc. Это позволит работать с форматами MP4, WebM и другими. - Кастомизация внешнего вида. Добавьте CSS-анимации, адаптивность, иконки и другую стилизацию для лучшего UX.
- Загрузка списка видео из базы данных или метаданных поста. Это позволит управлять плейлистами через админку WordPress.
Пример добавления автопроигрывания следующего видео
Для реализации автоперехода после окончания видео в iframe с YouTube можно использовать API YouTube Player. Ниже пример подключения API и переключения видео:
function omni_video_embed_youtube_playlist() {
?>
<div id="omni-video-player">
<div id="player"></div>
<ul id="omni-video-playlist">
<li data-video-id="dQw4w9WgXcQ">Видео 1</li>
<li data-video-id="oHg5SJYRHA0">Видео 2</li>
<li data-video-id="3JZ_D3ELwOQ">Видео 3</li>
</ul>
</div>
<style>
#omni-video-playlist { list-style: none; padding: 0; margin-top: 10px; }
#omni-video-playlist li { cursor: pointer; padding: 5px; background: #f0f0f0; margin-bottom: 5px; }
#omni-video-playlist li:hover { background: #ddd; }
#omni-video-playlist li.active { background: #bbb; font-weight: bold; }
</style>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
let player;
let currentIndex = 0;
const videos = Array.from(document.querySelectorAll('#omni-video-playlist li'));
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: videos[0].getAttribute('data-video-id'),
events: {
'onStateChange': onPlayerStateChange
}
});
setActive(currentIndex);
}
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.ENDED) {
currentIndex = (currentIndex + 1) % videos.length;
player.loadVideoById(videos[currentIndex].getAttribute('data-video-id'));
setActive(currentIndex);
}
}
function setActive(index) {
videos.forEach((el, i) => {
el.classList.toggle('active', i === index);
});
}
document.addEventListener('DOMContentLoaded', () => {
videos.forEach((el, index) => {
el.addEventListener('click', () => {
currentIndex = index;
player.loadVideoById(el.getAttribute('data-video-id'));
setActive(index);
});
});
});
</script>
<?php
}
add_shortcode('omni_video_youtube_playlist', 'omni_video_embed_youtube_playlist');Этот код создаст полноценный YouTube плейлист с автопроигрыванием и переключением по клику, используя официальное YouTube iframe API.
Выводы и рекомендации
Создание видео плейлиста в WordPress — задача, которую можно решить как с помощью плагинов, так и собственным кодом. Если нужен быстрый старт и минимум настроек — выбирайте плагины, например Video Gallery или FV Flowplayer.
Если важна кастомизация и уникальный функционал — используйте подход с шорткодами и JavaScript, как показано в примерах выше. Это позволит точно подстроить плейлист под задачи вашего сайта, улучшить UX и SEO.
Не забывайте также о производительности — загружайте видео по мере необходимости, используйте кэширование и оптимизируйте размеры видео для быстрой загрузки страниц.