API встраиваемого видеоплеера

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

Чтобы начать работу, ознакомьтесь со следующими разделами.

Настройка
Управление плеером
Подписка на события
Справка по управлению плеером

Настройка

1. Настройте плагин.

Инструкции по настройке плагина см. в документации для встраиваемого видеоплеера.

2. Получите экземпляр API встраиваемого видеоплеера.

Чтобы получить экземпляр API встраиваемого видеоплеера, дождитесь события xfbml.ready. Если сообщение имеет тип (type) video, то событие ready запущено встраиваемым видеоплеером.

var my_video_player;
FB.Event.subscribe('xfbml.ready', function(msg) {
  if (msg.type === 'video') {
    my_video_player = msg.instance;
  }
});

3. Пример полного кода

В примере ниже предполагается, что при инициализации Facebook SDK для JavaScript используется ID приложения. Если у вас нет ID приложения, узнайте, как его создать.

В приведенном ниже коде подставьте вместо {your-app-id} ID приложения, а вместо data-href — URL видео. Обязательно проверьте событие xfbml.ready после вызова функции FB.init().

<html>
<head>
  <title>Your Website Title</title>
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '{your-app-id}',
        xfbml      : true,
        version    : 'v3.2'
      });
    
      // Get Embedded Video Player API Instance
      var my_video_player;
      FB.Event.subscribe('xfbml.ready', function(msg) {
        if (msg.type === 'video') {
          my_video_player = msg.instance;
        }
      });
    };
  </script>
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>

  <!-- Your embedded video player code -->
  <div  
    class="fb-video" 
    data-href="https://www.facebook.com/facebook/videos/10153231379946729/" 
    data-width="500" 
    data-allowfullscreen="true"></div>

</body>
</html>

Работа с несколькими плеерами

Предположим, вы используете несколько плееров на одной странице. В этом случае, чтобы идентифицировать видеоплеер, нужно добавить в тег плеера атрибут id и проверить id в объекте msg.

<div id="my-video-player-id" ... />
<script>
FB.Event.subscribe('xfbml.ready', function(msg) {
  if (msg.type === 'video' && msg.id === 'my-video-player-id') {
     // True for <div id="my-video-player-id" ...
     my_video_player = msg.instance;
  }
});
</script>

Управление плеером

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

Примеры использования

// Start video playback
my_video_player.play();

// Check whether video is muted
if (my_video_player.isMuted()) {
  // Video is muted
}

// Jump to second 5 of the video
my_video_player.seek(5);

Справка по управлению плеером

Подписка на события

Функция subscribe() добавляет функцию ожидания определенного события, например startedPlaying.

var myEventHandler = my_video_player.subscribe('startedPlaying', function(e) {
  // Video started playing ...
});

Удаление подписок на событие

Функция subscribe() возвращает маркер с методом release. При вызове этот метод удаляет функцию ожидания из события.

myEventHandler.release('startedPlaying');

Справка по событиям

Справка об управлении плеером

Функция	Описание	Аргументы (тип)
`play()`	Воспроизведение видео.
`pause()`	Приостановка видео.
`seek(seconds)`	Поиск указанной позиции.	`seconds` (`number`)
`mute()`	Выключение звука.
`unmute()`	Включение звука.
`isMuted()`	`true`, если звук выключен; `false`, если звук включен.
`setVolume(volume)`	Установка определенного значения громкости (`float`, по шкале от `0` до `1`).	`volume` (`float`)
`getVolume()`	Получение текущего значения громкости видео (`float`, по шкале от `0` до `1`).
`getCurrentPosition()`	Получение текущей позиции в видео (в секундах).
`getDuration()`	Получение продолжительности видео (в секундах).
`subscribe(event, eventCallback)`	Добавление функции ожидания указанного события. Подробнее о событиях см. в разделе Подписка на события. Получение маркера с методом `release`. При вызове этот метод удаляет функцию ожидания из события.	`event` (`string`), `eventCallback` (`function`)

Справка по событиям

Событие	Описание
`startedPlaying`	Начало воспроизведения видео.
`paused`	Приостановка воспроизведения.
`finishedPlaying`	Завершение воспроизведения.
`startedBuffering`	Начало буферизации видео.
`finishedBuffering`	Извлечение видео из буфера.
`error`	Ошибка в видео.