Embedded Video Player API

Using embedded video player API you can control the embedded video player as well as observing events fired 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.

SetupPlayer ControlsEventsReference

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 -->
  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '{your-app-id}',
        xfbml      : true,
        version    : 'v2.5'
      });
    
      // 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;
        }
      });
    };

    (function(d, s, id){
       var js, fjs = d.getElementsByTagName(s)[0];
       if (d.getElementById(id)) {return;}
       js = d.createElement(s); js.id = id;
       js.src = "//connect.facebook.net/en_US/sdk.js";
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));
  </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 removeListener method that when called, will remove the listener again from the event.

myEventHandler.removeListener('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 removeListener 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.