L’API Embedded Video Player vous permet de contrôler le lecteur vidéo intégré, mais aussi d’observer les évènements déclenchés par le lecteur. Vous pouvez, par exemple, écouter l’évènement lors de la mise en pause d’une vidéo ou lancer la lecture à l’aide d’un bouton personnalisé.
Pour commencer, procédez comme décrit dans les sections ci-dessous :
Lisez la documentation du lecteur vidéo intégré pour apprendre comment configurer le plugin.
Pour obtenir une instance de l’API Embedded Video Player, écoutez xfbml.ready
. Si le type
de message est video
, alors l’évènement ready
a été lancé par le lecteur vidéo intégré.
var my_video_player; FB.Event.subscribe('xfbml.ready', function(msg) { if (msg.type === 'video') { my_video_player = msg.instance; } });
Dans l’exemple de code ci-dessous, nous partons du principe que vous avez utilisé un ID d’app pour l’initialisation du SDK Facebook pour JavaScript. Si vous n’avez pas encore d’ID d’app, lisez les documents liés à la création d’un ID d’app.
Dans l’exemple de code ci-dessous, remplacez {your-app-id}
par votre ID d’app et data-href
par l’URL de votre vidéo. Assurez-vous de vérifier l’évènement xfbml.ready
après avoir appelé la fonction 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>
Si vous utilisez plusieurs lecteurs vidéo sur une page, vous pouvez identifier chaque lecteur en ajoutant un attribut id
à sa balise et en vérifiant la valeur id
dans l’objet 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>
Vous pouvez appeler un ensemble de fonctions pour contrôler votre lecteur vidéo ou obtenir son statut actuel, par exemple la position actuelle de la lecture.
// 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);Référence concernant les commandes du lecteur
La fonction subscribe()
ajoute une fonction d’écoute pour un évènement particulier, par exemple startedPlaying
.
var myEventHandler = my_video_player.subscribe('startedPlaying', function(e) { // Video started playing ... });
La fonction subscribe()
renvoie un token avec une méthode release
. La fonction d’écoute est supprimée de l’évènement lorsque cette méthode est appelée.
myEventHandler.release('startedPlaying');Référence pour les évènements
Vous pouvez appeler un ensemble de fonctions pour contrôler votre lecteur vidéo ou obtenir son statut actuel, par exemple la position actuelle de la lecture.
Fonction | Description | Arguments (Type) |
---|---|---|
| Lit la vidéo. | |
| Met la vidéo en pause. | |
| Avance jusqu’à la position indiquée. |
|
| Désactive le son de la vidéo. | |
| Active le son de la vidéo. | |
|
| |
| Règle le volume sur la valeur indiquée ( |
|
| Renvoie le volume actuel de la vidéo ( | |
| Renvoie la position actuelle de la lecture en secondes. | |
| Renvoie la durée de la vidéo en secondes. | |
| Ajoute une fonction d’écoute pour l’évènement indiqué. Pour obtenir des détails sur les évènements, consultez la section Abonnement à des évènements. Renvoie un token avec une méthode |
|
Évènement | Description |
---|---|
| Lancé lorsque la lecture de la vidéo commence. |
| Lancé lorsque la vidéo est mise en pause. |
| Lancé à la fin de la lecture de la vidéo. |
| Lancé lorsque la mise en mémoire tampon de la vidéo commence. |
| Lancé à la fin de la mise en mémoire tampon de la vidéo. |
| Lancé lorsqu’une erreur se produit dans la vidéo. |