Glabix Embed Player — PostMessage API

API для управления встроенным видеоплеером Glabix через iframe с родительской страницы.

Встраивание

<iframe id="player" src="https://app.glabix.com/share/embed/{UUID}" allow="autoplay" allowfullscreen></iframe>

Query-параметры:

• ?t=30 — начать воспроизведение с 30-й секунды
• ?autoplay=1 — автовоспроизведение при загрузке
• ?muted=1 — запустить без звука

allow="autoplay" обязателен, если вы планируете запускать воспроизведение через postMessage-команду play. Без него браузер заблокирует вызов play().

Протокол сообщений

Все сообщения имеют формат { type: 'glabix-player', ... }.

Родительская страница → Плеер (команды)

Отправка команд плееру через postMessage:

const iframe = document.getElementById('player');

// Перемотать на 30-ю секунду
iframe.contentWindow.postMessage(
  { type: 'glabix-player', action: 'seek', data: { time: 30 } }, '*'
);

// Запустить воспроизведение
iframe.contentWindow.postMessage(
  { type: 'glabix-player', action: 'play' }, '*'
);

// Поставить на паузу
iframe.contentWindow.postMessage(
  { type: 'glabix-player', action: 'pause' }, '*'
);

// Запросить текущее время (ответ: событие 'currentTime')
iframe.contentWindow.postMessage(
  { type: 'glabix-player', action: 'getCurrentTime' }, '*'
);

// Запросить длительность (ответ: событие 'duration')
iframe.contentWindow.postMessage(
  { type: 'glabix-player', action: 'getDuration' }, '*'
);

// Запросить полное состояние воспроизведения (ответ: событие 'playbackState')
iframe.contentWindow.postMessage(
  { type: 'glabix-player', action: 'getPlaybackState' }, '*'
);

Плеер → Родительская страница (события)

Подписка на события плеера:

window.addEventListener('message', (e) => {
  if (e.data?.type !== 'glabix-player') return;

  switch (e.data.event) {
    case 'ready':
      // Плеер загружен, можно отправлять команды
      // e.data.data = { duration: 120.5 }
      break;

    case 'timeupdate':
      // Срабатывает ~4 раза в секунду во время воспроизведения
      // e.data.data = { time: 30.5 }
      break;

    case 'play':
      // Воспроизведение началось
      // e.data.data = { time: 30.5 }
      break;

    case 'pause':
      // Воспроизведение приостановлено
      // e.data.data = { time: 30.5 }
      break;

    case 'seeked':
      // Перемотка завершена
      // e.data.data = { time: 30.0 }
      break;

    case 'ended':
      // Видео закончилось
      break;

    case 'currentTime':
      // Ответ на 'getCurrentTime'
      // e.data.data = { time: 30.5 }
      break;

    case 'duration':
      // Ответ на 'getDuration'
      // e.data.data = { duration: 120.5 }
      break;

    case 'playbackState':
      // Ответ на 'getPlaybackState'
      // e.data.data = { playing: true, time: 30.5, duration: 120.5 }
      break;
  }
});

Пример: оглавление видео

<iframe id="player" src="https://app.glabix.com/share/embed/UUID"
        style="width:100%;aspect-ratio:16/9;border:none" allow="autoplay" allowfullscreen></iframe>

<nav id="chapters">
  <button data-time="0">Вступление</button>
  <button data-time="120">Архитектура</button>
  <button data-time="360">Демо</button>
  <button data-time="540">Вопросы и ответы</button>
</nav>

<script>
const iframe = document.getElementById('player');
const buttons = document.querySelectorAll('#chapters button');

// Клик по главе → перемотка + воспроизведение
buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    const time = Number(btn.dataset.time);
    iframe.contentWindow.postMessage({ type: 'glabix-player', action: 'seek', data: { time } }, '*');
    iframe.contentWindow.postMessage({ type: 'glabix-player', action: 'play' }, '*');
  });
});

// Подсветка текущей главы по времени воспроизведения
window.addEventListener('message', (e) => {
  if (e.data?.type !== 'glabix-player') return;
  if (e.data.event !== 'timeupdate') return;

  const currentTime = e.data.data.time;
  let activeBtn = buttons[0];
  buttons.forEach(btn => {
    if (currentTime >= Number(btn.dataset.time)) activeBtn = btn;
  });
  buttons.forEach(btn => btn.classList.toggle('active', btn === activeBtn));
});
</script>

Пример: кастомные контролы

<button onclick="send('play')">Play</button>
<button onclick="send('pause')">Pause</button>
<span id="time">0:00</span>

<script>
const iframe = document.getElementById('player');

function send(action, data) {
  iframe.contentWindow.postMessage({ type: 'glabix-player', action, data }, '*');
}

function formatTime(sec) {
  const m = Math.floor(sec / 60);
  const s = Math.floor(sec % 60);
  return m + ':' + String(s).padStart(2, '0');
}

window.addEventListener('message', (e) => {
  if (e.data?.type !== 'glabix-player') return;
  if (e.data.event === 'timeupdate') {
    document.getElementById('time').textContent = formatTime(e.data.data.time);
  }
});
</script>

Важно

• Дождитесь события ready перед отправкой команд — команды, отправленные до инициализации плеера, будут проигнорированы.
• Событие timeupdate срабатывает примерно 4 раза в секунду. При необходимости добавьте throttle на стороне потребителя.
• В примерах postMessage использует '*' как target origin. Для большей безопасности укажите 'https://app.glabix.com' при прослушивании событий.