Внешние таймкоды

Использование внешних таймкодов с плеером Boomstream

Коротко о главном:
Внешние таймкоды позволяют разместить навигацию по видео в любом месте страницы через Boomstream Player API. JavaScript-код на странице слушает события плеера и вызывает метод seek для перемотки к нужной временной метке.

Что это и зачем нужно

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

Реализация работает через Player API: плеер отправляет сообщения через postMessage, а ваш JavaScript-код отлавливает клики по таймкодам и вызывает действие seek.

Живой пример

Как это работает

1. Разместите JavaScript код на странице. Этот код отлавливает события, которые создаёт плеер, и принимает сообщения postMessage.

2. Для перемотки видео к выбранному фрагменту вызывайте действие seek.

Минимальный пример кода

<ul class="timecodes">
  <li><a href="#" data-time="0">Введение</a></li>
  <li><a href="#" data-time="145">Обзор возможностей</a></li>
  <li><a href="#" data-time="420">Демонстрация</a></li>
</ul>

<script>
const player = document.querySelector('iframe[src*="play.boomstream.com"]');
document.querySelectorAll('[data-time]').forEach(function(link) {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    player.contentWindow.postMessage({
      action: 'seek',
      value: parseInt(this.dataset.time, 10)
    }, '*');
  });
});
</script>

Полный пример реализации доступен на странице:

view-source:https://play.boomstream.com/test/timecodes/ru.html

Важное уточнение

Для создания таймкодов в самом плеере (без написания кода) воспользуйтесь отдельной инструкцией по встроенным таймкодам.

Частые вопросы

Работают ли внешние таймкоды с защищёнными видео?
Да, Player API работает для всех типов видео: публичных, защищённых паролем, платных и приватных.

Можно ли размещать таймкоды на другом домене?
Да, postMessage работает между разными доменами. Плеер принимает команды со всех сайтов, на которых он встраивается.

Нужны ли дополнительные библиотеки?
Нет, интеграция работает на чистом JavaScript и стандартном механизме postMessage.