Este documento se ha actualizado.
La traducción en Español (España) no está disponible todavía.

Actualización del documento en inglés: 23 dic. 2019

API del reproductor de vídeo insertado

La API del reproductor de vídeo insertado permite controlar este reproductor y observar los eventos que activa. Por ejemplo, puedes escuchar el evento cuando se pausa un vídeo o iniciar la reproducción de un vídeo con un botón personalizado.

Para empezar, sigue los pasos de las siguientes secciones:

Configuración
Controles del reproductor
Suscripción a eventos
Referencia de los controles del reproductor

Configuración

1. Configurar el plugin

Consulta la documentación del reproductor de vídeo insertado para obtener información sobre cómo configurar el plugin.

2. Obtener la instancia de la API del reproductor de vídeo insertado

Para obtener la instancia de la API del reproductor de vídeo insertado, escucha xfbml.ready. Si el valor de type del mensaje es video, esto indica que el reproductor de vídeo insertado ha activado el evento ready.

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

3. Ejemplo de código completo

En el ejemplo de código siguiente se asume que se está inicializando el SDK de Facebook para JavaScript con un identificador de la aplicación. Si aún no lo tienes, consulta la documentación sobre cómo crear un identificador de la aplicación.

En el ejemplo de código siguiente, reemplaza {your-app-id} por el identificador de la aplicación y data-href por la URL del vídeo. Asegúrate de comprobar el evento xfbml.ready tras llamar a la función 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>

Gestionar varios reproductores

Si usas varios reproductores de vídeo en una página, para identificar uno de ellos, añade un atributo id a la etiqueta correspondiente y comprueba su valor de id en el 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 del reproductor

Si quieres, puedes llamar a un conjunto de funciones para controlar el reproductor de vídeo u obtener su estado actual (por ejemplo, la posición de reproducción actual).

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

Referencia de los controles del reproductor

Suscripción a eventos

La función subscribe() añade una función de escucha para un evento especificado (por ejemplo, startedPlaying).

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

Eliminar las suscripciones de evento

La función subscribe() devuelve un identificador con un método release y, cuando lo llamamos, se elimina la función de escucha del evento.

myEventHandler.release('startedPlaying');

Referencia de los eventos

Referencia de los controles del reproductor

Si quieres, puedes llamar a un conjunto de funciones para controlar el reproductor de vídeo u obtener su estado actual (por ejemplo, la posición de reproducción actual).

Función	Descripción	Argumentos (tipo)
`play()`	Reproduce el vídeo.
`pause()`	Pausa el vídeo.
`seek(seconds)`	Busca la posición especificada.	`seconds` (`number`)
`mute()`	Silencia el vídeo.
`unmute()`	Activa el sonido del vídeo.
`isMuted()`	`true` si el vídeo está silenciado. En caso contrario, `false`.
`setVolume(volume)`	Establece el volumen en el número especificado (`float`, en una escala de `0` a `1`).	`volume` (`float`)
`getVolume()`	Devuelve el volumen actual del vídeo (`float`, en una escala de `0` a `1`).
`getCurrentPosition()`	Devuelve la posición de tiempo del vídeo actual en segundos.
`getDuration()`	Devuelve la duración del vídeo en segundos.
`subscribe(event, eventCallback)`	Añade una función de escucha para el evento especificado. Para obtener más información sobre los eventos, consulta la sección Suscripción a eventos. Devuelve un identificador con un método `release` y, cuando lo llamamos, se elimina la función de escucha del evento.	`event` (`string`), `eventCallback` (`function`)

Referencia de los eventos

Evento	Descripción
`startedPlaying`	Se activa cuando se inicia la reproducción del vídeo.
`paused`	Se activa cuando se pausa el vídeo.
`finishedPlaying`	Se activa cuando se completa la reproducción del vídeo.
`startedBuffering`	Se activa cuando se inicia el almacenamiento en búfer del vídeo.
`finishedBuffering`	Se activa cuando se recupera el vídeo del almacenamiento en búfer.
`error`	Se activa cuando se produce un error en el vídeo.