Embedded Video Player API

Using the Embedded Video Player API you can control the embedded video player as well as observe events triggered by the player. For example, you may listen to the event when a video is paused or start the video playback using a custom button.

To get started follow the sections below:

Setup
Player Controls
Subscribe to Events
Player Controls Reference

Setup

1. Configure Plugin

Read the embedded video player documentation to learn how to setup the plugin.

2. Get Embedded Video Player API Instance

To get the embedded video player API instance Listen to xfbml.ready. If the message type is video, the ready event was fired by the embedded video player.

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

3. Full Code Example

In the code sample below we assume you are using an app ID when initalizing the Facebook SDK for JavaScript. If you don't have an app ID yet, read the docs for creating an app ID.

In the code sample below replace {your-app-id} by your app ID and data-href with your video URL. Make sure that you check for the xfbml.ready event after calling the function 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>

Handling Multiple Players

If you are using multiple players on one page you can identify a video player by adding an id attribute to the video player tag and checking for its id in the msg object:

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

Player Controls

You can call a set of functions to control your video player or get its current status, e.g. the current playback position.

Usage Examples

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

Player Controls Reference

Subscribing to Events

The function subscribe() adds a listener function for a specified event, e.g. startedPlaying.

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

Remove Event Subscriptions

The function subscribe() returns a token with a release method that when called, will remove the listener again from the event.

myEventHandler.release('startedPlaying');

Event Reference

Player Controls Reference

You can call a set of functions to control your video player or get its current status, e.g. the current playback position.

Function	Description	Arguments (Type)
`play()`	Plays the video.
`pause()`	Pauses the video.
`seek(seconds)`	Seeks to specified position.	`seconds` (`number`)
`mute()`	Mute the video.
`unmute()`	Unmute the video.
`isMuted()`	`true` if video is muted, `false` if not.
`setVolume(volume)`	Sets the volume to specified number (`float`, scale from `0` to `1`).	`volume` (`float`)
`getVolume()`	Returns the video's current volume (`float`, scale from `0` to `1`).
`getCurrentPosition()`	Returns current video time position in seconds.
`getDuration()`	Returns the video duration in seconds.
`subscribe(event, eventCallback)`	Adds a listener function for the specified event. For details about events, refer to the section Subscribing to Events. Returns a token with a `release` method that when called, will remove the listener again from the event.	`event` (`string`), `eventCallback` (`function`)

Event Reference

Event	Description
`startedPlaying`	Fired when video starts to play.
`paused`	Fired when video pauses.
`finishedPlaying`	Fired when video finishes playing.
`startedBuffering`	Fired when video starts to buffer.
`finishedBuffering`	Fired when video recovers from buffering.
`error`	Fired when an error occurs on the video.