Владельцы сайтов на WordPress часто сталкиваются с необходимостью внедрить на свои страницы видео, но стандартные плееры или сторонние решения не всегда отвечают требованиям по дизайну или функционалу. В этой статье мы подробно разберём, как создать собственный видео плеер в WordPress с нуля, интегрировать его в тему или плагин, а также рассмотрим полезные плагины для расширенной работы с видео.
Почему стоит создавать собственный видео плеер в WordPress
Стандартный HTML5 видео плеер и встроенные возможности WordPress подходят для базовой работы, но у них есть ограничения. Во-первых, дизайн плеера часто не вписывается в стили сайта, и изменить его можно только через сложные CSS хаки. Во-вторых, функционал ограничен: нет поддержки плейлистов, кастомных кнопок, аналитики просмотра и других полезных опций.
Создавая собственный видео плеер, вы получаете полный контроль над внешним видом и поведением, можете интегрировать дополнительные функции, например, подсветку субтитров, водяные знаки, кастомные контролы и многое другое.
Кроме того, собственный плеер поможет оптимизировать загрузку страницы, загрузку видео и улучшить пользовательский опыт.
Обзор плагинов для кастомизации видео плееров в WordPress
Если вы не хотите писать плеер с нуля, существуют качественные плагины, которые позволяют настраивать видео плееры под свои нужды:
- FV Player — мощный плеер с поддержкой субтитров, плейлистов, аналитики и адаптивного дизайна.
- Video.js HTML5 Player — плагин-обёртка для популярной библиотеки Video.js, с большим количеством тем и плагинов для расширения функционала.
- Advanced Responsive Video Embedder (ARVE) — удобный для вставки видео с YouTube, Vimeo и локальных файлов с настройками плеера.
Эти плагины облегчают задачу, но если нужен уникальный функционал, например, интеграция с внутренней системой сайта или особый дизайн, стоит рассмотреть разработку собственного плеера.
Создание базового собственного видео плеера в WordPress
Давайте напишем простой кастомный видео плеер с использованием HTML5 и JavaScript, который можно будет интегрировать в тему или плагин WordPress.
Для начала создадим функцию в файле functions.php вашей темы или в отдельном плагине, которая будет выводить HTML код плеера через шорткод.
function wpvideo_custom_video_player_shortcode($atts) {
$atts = shortcode_atts(array(
'src' => '',
'width' => '640',
'height' => '360'
), $atts, 'wpvideo_player');
if (empty($atts['src'])) {
return '<p>Видео не указано.</p>';
}
ob_start();
?>
<div class="wpvideo-player-wrapper" style="max-width: <?php echo esc_attr($atts['width']); ?>px;">
<video id="wpvideo-player" width="<?php echo esc_attr($atts['width']); ?>" height="<?php echo esc_attr($atts['height']); ?>" controls preload="metadata">
<source src="<?php echo esc_url($atts['src']); ?>" type="video/mp4">
Ваш браузер не поддерживает видео тег.
</video>
<div class="wpvideo-controls">
<button id="wpvideo-playpause">Play</button>
<input type="range" id="wpvideo-progress" value="0" min="0" max="100">
<span id="wpvideo-time">0:00 / 0:00</span>
</div>
</div>
<script>
(function(){
var player = document.getElementById('wpvideo-player');
var playpauseBtn = document.getElementById('wpvideo-playpause');
var progress = document.getElementById('wpvideo-progress');
var timeDisplay = document.getElementById('wpvideo-time');
playpauseBtn.addEventListener('click', function() {
if (player.paused) {
player.play();
playpauseBtn.textContent = 'Pause';
} else {
player.pause();
playpauseBtn.textContent = 'Play';
}
});
player.addEventListener('timeupdate', function() {
var percent = (player.currentTime / player.duration) * 100;
progress.value = percent || 0;
var formatTime = function(seconds) {
var m = Math.floor(seconds / 60);
var s = Math.floor(seconds % 60);
return m + ':' + (s < 10 ? '0' + s : s);
};
timeDisplay.textContent = formatTime(player.currentTime) + ' / ' + formatTime(player.duration);
});
progress.addEventListener('input', function() {
var seekTime = (progress.value / 100) * player.duration;
player.currentTime = seekTime;
});
})();
</script>
<style>
.wpvideo-player-wrapper {
position: relative;
background: #000;
color: #fff;
font-family: Arial, sans-serif;
}
.wpvideo-controls {
display: flex;
align-items: center;
padding: 5px;
background: #222;
}
#wpvideo-progress {
flex-grow: 1;
margin: 0 10px;
}
</style>
<?php
return ob_get_clean();
}
add_shortcode('wpvideo_player', 'wpvideo_custom_video_player_shortcode');Этот шорткод выводит видео с кастомной панелью управления: кнопкой play/pause, прогрессбаром и таймером текущего времени и общей длительности.
Чтобы вставить плеер в запись или страницу, используйте шорткод с указанием пути к видео:
[wpvideo_player src="https://example.com/video.mp4" width="800" height="450"]
Расширение функционала собственного видео плеера
Добавление кастомных кнопок и событий
Вы можете добавить кнопки для регулировки громкости, переключения полноэкранного режима или переключения субтитров. Для примера добавим кнопку полноэкранного режима:
var fullscreenBtn = document.createElement('button');
fullscreenBtn.textContent = 'Fullscreen';
fullscreenBtn.addEventListener('click', function() {
if (player.requestFullscreen) {
player.requestFullscreen();
} else if (player.webkitRequestFullscreen) {
player.webkitRequestFullscreen();
} else if (player.mozRequestFullScreen) {
player.mozRequestFullScreen();
} else if (player.msRequestFullscreen) {
player.msRequestFullscreen();
}
});
var controls = document.querySelector('.wpvideo-controls');
controls.appendChild(fullscreenBtn);Вставьте этот код в блок <script> после инициализации переменных, и кнопка полноэкранного режима появится в панели управления.
Обработка событий и интеграция с WordPress
Если нужно записывать статистику просмотров, можно использовать AJAX-запросы к серверу WordPress, вызывая кастомные REST API эндпоинты или admin-ajax.php. Например, при начале воспроизведения отправлять запрос на сервер:
player.addEventListener('play', function() {
fetch('/wp-json/wpvideo/v1/log_view', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ video: player.currentSrc })
});
});Для этого нужно зарегистрировать REST API маршрут в WordPress, который будет обрабатывать такие запросы.
Регистрация REST API маршрута для логирования просмотров
Добавим в файл плагина или functions.php следующий код:
function wpvideo_register_rest_routes() {
register_rest_route('wpvideo/v1', '/log_view', array(
'methods' => 'POST',
'callback' => 'wpvideo_log_view',
'permission_callback' => '__return_true'
));
}
add_action('rest_api_init', 'wpvideo_register_rest_routes');
function wpvideo_log_view(WP_REST_Request $request) {
$data = $request->get_json_params();
if (empty($data['video'])) {
return new WP_Error('no_video', 'Видео не указано', array('status' => 400));
}
// Здесь можно реализовать логику записи в базу или файл
// Например, update_option('wpvideo_last_viewed', $data['video']);
return rest_ensure_response(array('success' => true));
}Это простой пример, который можно расширить для записи статистики в таблицу базы данных, отправки уведомлений и т.д.
Советы по оптимизации видео на сайте WordPress
Использование правильных форматов видео
Для лучшей совместимости и скорости загрузки рекомендуется использовать современные форматы видео, такие как MP4 с кодеком H.264 или WebM. Также стоит создавать несколько вариантов качества для адаптивной доставки.
Lazy loading видео
Чтобы ускорить загрузку страниц, видео стоит загружать только при взаимодействии пользователя или когда видео появляется в области видимости (lazy loading). В WordPress 5.5+ для изображений это реализовано по умолчанию, но для видео придется использовать JavaScript библиотеки или самостоятельно реализовывать отложенную загрузку.
CDN и кэширование
Рекомендуется использовать CDN (Content Delivery Network) для доставки видео, чтобы снизить нагрузку на основной сервер и ускорить загрузку для пользователей из разных регионов. Также можно использовать плагины кэширования, которые учитывают особенности работы с видео.
Заключение
Создание собственного видео плеера в WordPress — задача вполне решаемая и полезная, если стандартных решений недостаточно. Используя приведённые примеры и рекомендации, можно быстро внедрить кастомный плеер, расширить его функционал и интегрировать с внутренними сервисами сайта. При этом не забывайте об оптимизации и удобстве пользователя, чтобы видео на вашем сайте смотрелось профессионально и быстро загружалось.