API Embedded Video Player

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 :

Configuration
Commandes du lecteur
Abonnement à des évènements
Référence concernant les commandes du lecteur

Configuration

1. Configurer le plugin

Lisez la documentation du lecteur vidéo intégré pour apprendre comment configurer le plugin.

2. Obtenir une instance de l’API Embedded Video Player

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

3. Exemple de code complet

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>

Gestion de plusieurs lecteurs

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>

Commandes du lecteur

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.

Exemples d’utilisation

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

Abonnement à des évènements

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 ...
});

Supprimer des abonnements à des évènements

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

Référence concernant les commandes du lecteur

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)
`play()`	Lit la vidéo.
`pause()`	Met la vidéo en pause.
`seek(seconds)`	Avance jusqu’à la position indiquée.	`seconds` (`number`)
`mute()`	Désactive le son de la vidéo.
`unmute()`	Active le son de la vidéo.
`isMuted()`	`true` si le son de la vidéo est désactivé, `false` dans le cas contraire.
`setVolume(volume)`	Règle le volume sur la valeur indiquée (`float`, sur une échelle de `0` à `1`).	`volume` (`float`)
`getVolume()`	Renvoie le volume actuel de la vidéo (`float`, sur une échelle de `0` à `1`).
`getCurrentPosition()`	Renvoie la position actuelle de la lecture en secondes.
`getDuration()`	Renvoie la durée de la vidéo en secondes.
`subscribe(event, eventCallback)`	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 `release`. La fonction d’écoute est supprimée de l’évènement lorsque cette méthode est appelée.	`event` (`string`), `eventCallback` (`function`)

Référence pour les évènements

Évènement	Description
`startedPlaying`	Lancé lorsque la lecture de la vidéo commence.
`paused`	Lancé lorsque la vidéo est mise en pause.
`finishedPlaying`	Lancé à la fin de la lecture de la vidéo.
`startedBuffering`	Lancé lorsque la mise en mémoire tampon de la vidéo commence.
`finishedBuffering`	Lancé à la fin de la mise en mémoire tampon de la vidéo.
`error`	Lancé lorsqu’une erreur se produit dans la vidéo.