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:
Leia a documentação do player de vídeo incorporado para saber como configurar o plugin.
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; } });
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>
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>
É 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.
// 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
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 ... });
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
É 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) |
---|---|---|
| Reproduz o vídeo. | |
| Pausa o vídeo. | |
| Procura a posição especificada. |
|
| Silencia o vídeo. | |
| Reativa o som do vídeo. | |
|
| |
| Define o volume como o número especificado ( |
|
| Retorna o volume atual do vídeo ( | |
| Retorna a posição atual do vídeo em segundos. | |
| Retorna a duração do vídeo em segundos. | |
| 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 |
|
Evento | Descrição |
---|---|
| Ativado quando a reprodução do vídeo começa. |
| Ativado quando o vídeo é colocado em pausa. |
| Ativado quando a reprodução do vídeo termina. |
| Ativado quando o vídeo começa a ser armazenado em buffer. |
| Ativado quando o vídeo é recuperado do buffering. |
| Ativado quando acontece um erro no vídeo. |