API de player de vídeo incorporado

Use a API de player de vídeo incorporado para controlar o player de vídeo incorporado e observe os eventos desencadeados por ele. Por exemplo, você pode ouvir o evento quando o vídeo for pausado ou iniciar a reprodução do vídeo usando um botão personalizado.

Para começar, siga as seções abaixo:

Configuração
Controles do player
Assinatura de eventos
Referência de controles do player

Configuração

1. Configurar o plugin

Leia a documentação do player de vídeo incorporado para saber como configurar o plugin.

2. Obtenha a instância da API de player de vídeo incorporado

Para obter a instância da API de player de vídeo incorporado, consulte xfbml.ready. Se o type da mensagem for video, o evento ready foi desencadeado pelo player de vídeo incorporado.

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

3. Exemplo de código completo

No exemplo de código abaixo, presumimos que você está usando o ID do aplicativo ao inicializar o SDK do Facebook para JavaScript. Caso ainda não tenha o ID do aplicativo, leia os documentos sobre como criar um ID do aplicativo.

No exemplo de código abaixo, substitua {your-app-id} pelo ID do seu aplicativo e data-href pela URL do vídeo. Confira o evento xfbml.ready depois de chamar a função 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>

Como lidar com vários players

Se você estiver usando vários players em uma única página, poderá identificar um player de vídeo adicionando o atributo id à tag do player de vídeo e conferindo id no objeto 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>

Controles do player

É possível chamar um conjunto de funções para controlar o player de vídeo ou obter seu status atual, por exemplo, a posição atual de reprodução.

Exemplos de uso

// 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);

Referência de controles do player

Assinatura de eventos

A função subscribe() adiciona a função de ouvinte ao evento especificado, por exemplo, startedPlaying.

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

Remoção de assinaturas do evento

A função subscribe() retorna um token com método release. Quando chamado, esse token remove o ouvinte do evento.

myEventHandler.release('startedPlaying');

Referência de eventos

Referência de controles do player

É possível chamar um conjunto de funções para controlar o player de vídeo ou obter seu status atual, por exemplo, a posição atual de reprodução.

Função	Descrição	Argumentos (tipo)
`play()`	Reproduz o vídeo.
`pause()`	Pausa o vídeo.
`seek(seconds)`	Procura a posição especificada.	`seconds` (`number`)
`mute()`	Silencia o vídeo.
`unmute()`	Reativa o som do vídeo.
`isMuted()`	`true` se o vídeo estiver silenciado, `false` se não estiver.
`setVolume(volume)`	Define o volume como o número especificado (`float`, escala de `0` a `1`).	`volume` (`float`)
`getVolume()`	Retorna o volume atual do vídeo (`float`, escala de `0` a `1`).
`getCurrentPosition()`	Retorna a posição atual do vídeo em segundos.
`getDuration()`	Retorna a duração do vídeo em segundos.
`subscribe(event, eventCallback)`	Adiciona a função de ouvinte ao evento especificado. Para saber mais sobre eventos, consulte a seção Assinatura de eventos. Retorna um token com método `release`. Quando chamado, esse token remove o ouvinte do evento.	`event` (`string`), `eventCallback` (`function`)

Referência de eventos

Evento	Descrição
`startedPlaying`	Ativado quando a reprodução do vídeo começa.
`paused`	Ativado quando o vídeo é colocado em pausa.
`finishedPlaying`	Ativado quando a reprodução do vídeo termina.
`startedBuffering`	Ativado quando o vídeo começa a ser armazenado em buffer.
`finishedBuffering`	Ativado quando o vídeo é recuperado do buffering.
`error`	Ativado quando acontece um erro no vídeo.