Как использовать видео субтитры в WordPress: технические советы и примеры

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

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

Субтитры — это текстовые надписи, отображаемые во время воспроизведения видео, которые синхронизированы с аудиодорожкой. Они делают видео более доступными:

• Для людей с нарушениями слуха.
• Для пользователей, которые смотрят видео без звука (например, в общественных местах).
• Для улучшения понимания, если видео на иностранном языке.
• Для повышения SEO оптимизации сайта за счет текстового контента.

В WordPress это можно реализовать разными способами — от использования встроенных возможностей HTML5 до применения специализированных плагинов.

Добавление субтитров в видео через HTML5 и WordPress

Самый базовый способ — использовать тег <video> с элементом <track> для субтитров. Пример кода:

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="ru" label="Русский" default>
  Ваш браузер не поддерживает видео.
</video>

Здесь файл subtitles.vtt — это WebVTT файл с субтитрами. Его можно создать вручную или с помощью инструментов вроде Subtitle Tools.

Чтобы использовать этот код в WordPress, вставьте его в текстовый редактор HTML или в блок "Custom HTML" в Гутенберге.

Формат файла WebVTT

Пример содержимого файла subtitles.vtt:

WEBVTT

00:00:00.000 --> 00:00:05.000
Привет! Это пример субтитров для видео.

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

Использование плагинов для управления субтитрами в WordPress

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

1. FV Player

Плагин FV Player поддерживает загрузку субтитров в формате VTT и SRT, а также позволяет их переключать прямо на плеере пользователю.

• Поддержка нескольких языков субтитров.
• Автоматическое подключение субтитров к видео.
• Настройки стиля отображения субтитров.

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

2. Video.js – плеер с поддержкой субтитров

Video.js — популярный open-source видеоплеер с поддержкой субтитров и многих современных стандартов. Для WordPress есть несколько плагинов с его интеграцией, либо можно подключить Video.js вручную.

Пример подключения субтитров в Video.js:

<video id="my_video" class="video-js" controls preload="auto" width="640" height="360" data-setup='{}'>
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles.vtt" srclang="ru" label="Русский" default>
</video>

Если подключить Video.js в WordPress, можно использовать его расширенные возможности, например, стилизацию и кастомные настройки субтитров.

Автоматическое добавление субтитров к видео в WordPress с помощью API

Для проектов с большим количеством видео удобно автоматизировать процесс создания субтитров. Можно использовать сторонние сервисы распознавания речи, например, Google Cloud Speech-to-Text, и интегрировать их в WordPress.

Пример функции для автоматического создания субтитров при загрузке видео (упрощенный):

function wpvideo_create_subtitles_on_upload($attachment_id) {
  $attachment = get_post($attachment_id);
  $mime_type = get_post_mime_type($attachment_id);
  if (strpos($mime_type, 'video') !== false) {
    // Здесь должен быть вызов API распознавания речи
    // Полученный текст конвертируем в WebVTT формат
    $vtt_content = wpvideo_generate_vtt($transcript);
    // Сохраняем файл субтитров рядом с видео
    $upload_dir = wp_upload_dir();
    $vtt_path = $upload_dir['path'] . '/' . $attachment->post_name . '.vtt';
    file_put_contents($vtt_path, $vtt_content);
    // Привязываем субтитры к видео (например, сохраняем мета)
    update_post_meta($attachment_id, '_wpvideo_subtitles', $vtt_path);
  }
}
add_action('add_attachment', 'wpvideo_create_subtitles_on_upload');

Этот пример дает общее понимание, как связать загрузку видео и автоматическое создание субтитров. Для полноценной реализации потребуется подключить API распознавания речи и обработку ошибок.

Как вывести видео с субтитрами в WordPress с учетом метаданных

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

function wpvideo_display_video_with_subtitles($attachment_id) {
  $video_url = wp_get_attachment_url($attachment_id);
  $subtitles = get_post_meta($attachment_id, '_wpvideo_subtitles', true);
  if (!$video_url) return '';
  $html = '<video controls width="640">';
  $html .= '<source src="' . esc_url($video_url) . '" type="video/mp4">';
  if ($subtitles) {
    $html .= '<track kind="subtitles" src="' . esc_url(str_replace(ABSPATH, site_url() . '/', $subtitles)) . '" srclang="ru" label="Русский" default>';
  }
  $html .= 'Ваш браузер не поддерживает видео.';
  $html .= '</video>';
  return $html;
}

Используйте эту функцию в шаблонах или шорткодах для удобного вывода видео с субтитрами.

Советы по созданию качественных субтитров и их оптимизации

Чтобы субтитры были максимально полезными, соблюдайте несколько правил:

• Текст должен быть синхронизирован с аудиодорожкой, без опозданий.
• Используйте простой и понятный язык.
• Предусмотрите разные языки субтитров, если аудитория многоязычная.
• Оптимизируйте размер файлов субтитров, чтобы не замедлять загрузку.

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