RutubePlayer JS

Обертка над Rutube Player JSON API.

Установка

npm i rutube-player

Но, можно просто подключить файл к HTML странице:

<script src="https://unpkg.com/[email protected]"></script>

Инициализация

На странице должен находиться контейнер с идентификатором:

<div id="player"></div>

const rt = new Rutube();

rt.Player('player', {
  width: 560,
  height: 315,
  videoId: '6e5e06ad0f3104ae47fb0f69d2198855',
});

Доступные методы

Передаваемые параметры соответствуют официальному Rutube Player JSON API

| Название | Параметры | Описание | | ----------- | :-----------------: | ------------------------------------ | | play | - | Начать проигрывание видео | | pause | - | Поставить видео на паузу | | stop | - | Закончить цикл проигрывания | | seekTo | { time: 20 } | Переход к определенной секунде видео | | changeVideo | { id: "videoId" } | Загрузить в плеер другое видео | | unMute | - | Включение звука | | mute | - | Выключение звука |

Методы для получения информации о текущем видео

| Название | Параметры | Описание | | ------------------- | :-------: | ----------------------------- | | currentDuration() | - | Текущее время воспроизведения |

Публичный API

Возможность подписаться на событие состояния плеера и вызвать пользовательскую функцию:

{
  /* ... */
  "videoId": "6e5e06ad0f3104ae47fb0f69d2198855",
  "events": {
    "onReady": "onPlayerReady",
    "onStateChange": "onPlayerStateChange"
  }
}

function onPlayerReady(event) {
  console.log('Плеер загружен.');
  console.log(event); // { videoId: '6e5e06ad0f3104ae47fb0f69d2198855', clientId: 'e56df991-ca59-4036-91b8-e2913944f84c' }

  setTimeout('rt.play()', 700);
}

function onPlayerStateChange(event) {
  console.log(event); //  { 'playerState': { 'PLAYING': 0, 'PAUSED': 1, 'STOPPED': 0, 'ENDED': 0 } }

  if (event.playerState.PAUSED) {
    console.log('PAUSED');

    console.log(rt.currentDuration()); // 41.635709
  }

  if (event.playerState.ENDED) {
    console.log('ENDED');

    // если текущее видео закончилось, переход к другому с ID d124f6d7c977b94031051409aa55648a
    rt.changeVideo({
      id: 'd124f6d7c977b94031051409aa55648a',
    });
  }

  // if (event.playerState.PLAYING && !jumpToSeek) {
  //   rt.seekTo({ time: 124 });
  //   jumpToSeek = true;
  // }
}