Как сделать просмотр видео в AJAX на WordPress

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

Почему AJAX важен для просмотра видео на WordPress

Загрузка видео с перезагрузкой страницы раздражает пользователей и замедляет интерфейс. AJAX позволяет загружать и менять видео динамически, не перезагружая страницу, что улучшает UX и снижает нагрузку на сервер и клиента.

Кроме того, AJAX полезен для реализации функций: смена видео в плеере по клику, подгрузка видео из базы данных или API, создание плейлистов с динамической подгрузкой.

Рассмотрим, как реализовать простой просмотр видео на AJAX на примере встроенного HTML5-плеера и WP REST API.

Создание AJAX-запроса для загрузки видео в WordPress

Регистрация обработчика AJAX в WordPress

Для начала нужно зарегистрировать PHP-функцию, которая будет отдавать данные о видео по AJAX-запросу. В WordPress это делается через хуки wp_ajax_ и wp_ajax_nopriv_ для авторизованных и неавторизованных пользователей соответственно.

add_action('wp_ajax_wp8_get_video', 'wp8_get_video_callback');
add_action('wp_ajax_nopriv_wp8_get_video', 'wp8_get_video_callback');

function wp8_get_video_callback() {
    if (!isset($_GET['video_id'])) {
        wp_send_json_error('Video ID не передан');
        wp_die();
    }

    $video_id = intval($_GET['video_id']);
    $video_url = get_post_meta($video_id, 'video_url', true); // допустим, URL видео хранится в метаполе

    if (!$video_url) {
        wp_send_json_error('Видео не найдено');
        wp_die();
    }

    wp_send_json_success(['video_url' => esc_url_raw($video_url)]);
    wp_die();
}

В этом примере мы принимаем ID видео, получаем URL из метаполя и возвращаем его в формате JSON.

JavaScript для отправки AJAX-запроса и загрузки видео

Теперь добавим JS, который будет отправлять запрос и менять видео в плеере без перезагрузки страницы.

document.addEventListener('DOMContentLoaded', function() {
  const videoPlayer = document.getElementById('wp8-video-player');
  const videoButtons = document.querySelectorAll('.wp8-video-btn');

  videoButtons.forEach(button => {
    button.addEventListener('click', function() {
      const videoId = this.getAttribute('data-video-id');
      const xhr = new XMLHttpRequest();
      const url = wp8_ajax_object.ajax_url + '?action=wp8_get_video&video_id=' + videoId;

      xhr.open('GET', url, true);
      xhr.onload = function() {
        if (xhr.status === 200) {
          const response = JSON.parse(xhr.responseText);
          if (response.success) {
            videoPlayer.src = response.data.video_url;
            videoPlayer.play();
          } else {
            alert('Ошибка: ' + response.data);
          }
        } else {
          alert('Ошибка загрузки видео');
        }
      };
      xhr.send();
    });
  });
});

Этот скрипт слушает клики по кнопкам с классом wp8-video-btn, считывает ID видео и через AJAX получает адрес видео для загрузки в HTML5-плеер.

Подготовка HTML-разметки и подключение скриптов

Нужно создать HTML-плеер и кнопки для выбора видео. Пример разметки:

<video id="wp8-video-player" width="640" height="360" controls>
  <source src="" type="video/mp4">
  Тег video не поддерживается вашим браузером.
</video>

<div class="wp8-video-list">
  <button class="wp8-video-btn" data-video-id="123">Видео 1</button>
  <button class="wp8-video-btn" data-video-id="124">Видео 2</button>
</div>

Чтобы JS знал URL для AJAX-запросов, нужно локализовать скрипт в functions.php:

function wp8_enqueue_scripts() {
    wp_enqueue_script('wp8-video-ajax', get_template_directory_uri() . '/js/wp8-video-ajax.js', ['jquery'], null, true);

    wp_localize_script('wp8-video-ajax', 'wp8_ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php'),
    ]);
}
add_action('wp_enqueue_scripts', 'wp8_enqueue_scripts');

Так JS получит правильный адрес для AJAX.

Использование плагинов для расширенных возможностей

Если нужна более сложная работа с видео, например, плейлисты, адаптивный дизайн, аналитика и оптимизация, можно рассмотреть плагины:

• WPStories — для создания интерактивных видеоисторий.
• OmniVideo — универсальный видео-плеер с поддержкой AJAX.

Эти решения можно интегрировать с AJAX-загрузкой для удобства пользователей и повышения производительности.

Оптимизация и безопасность AJAX для видео

При работе с AJAX важно учитывать безопасность и производительность:

• Всегда валидируйте и фильтруйте входящие данные (в нашем примере — intval и проверка на пустоту).
• Используйте nonce, если нужно ограничить доступ по безопасности.
• Кешируйте результаты, если видео не изменяются часто, чтобы снизить нагрузку.
• Оптимизируйте видеофайлы для быстрой загрузки (сжатие, правильный формат).

Например, добавим nonce для безопасности:

add_action('wp_enqueue_scripts', function() {
  wp_localize_script('wp8-video-ajax', 'wp8_ajax_object', [
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('wp8_video_nonce')
  ]);
});

function wp8_get_video_callback() {
  check_ajax_referer('wp8_video_nonce', 'security');
  // остальной код
}

И в JS добавить заголовок:

xhr.setRequestHeader('X-WP-Nonce', wp8_ajax_object.nonce);

Итог

Просмотр видео с использованием AJAX на WordPress — задача вполне решаемая с минимальными усилиями. Важно грамотно организовать обработку AJAX-запросов, обеспечить безопасность и удобство пользователя. Приведённый пример легко адаптируется под разные сценарии, а при необходимости можно расширить функционал с помощью плагинов из WPShop.