嵌入式视频播放器 API

通过使用嵌入式视频播放器 API，您可以控制嵌入式视频播放器，以及查看播放器触发的事件。例如，您可以在视频暂停时侦听事件，或使用自定义按钮启动视频回放。

请按照以下部分的说明开始操作：

设置
播放器控件
订阅事件
播放器控件参考信息

设置

1.配置插件

阅读嵌入式视频播放器文档了解如何设置插件。

2.获取嵌入式视频播放器 API 实例

如要获取嵌入式视频播放器 API 实例，请侦听 xfbml.ready。如果消息 type 为 video，嵌入式视频播放器将触发 ready 事件。

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

3.完整代码示例

在以下代码示例中，我们假设您在初始化 JavaScript 版 Facebook SDK 时使用了应用编号。如果您还没有应用编号，请阅读创建应用编号文档。

在下方代码示例中，用应用编号替换 {your-app-id}，用视频网址替换 data-href。调用 FB.init() 函数后，请务必检查 xfbml.ready 事件。

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

处理多个播放器

如果在一个页面上使用了多个播放器，您可以通过向视频播放器标签添加 id 属性并检查 msg 对象中的 id，以此识别播放器：

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

播放器控件

您可以调用一系列函数来控制视频播放器或获取它的当前状态，例如当前播放位置。

使用示例

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

播放器控件参考信息

订阅事件

subscribe() 函数可以为指定事件添加侦听函数，例如 startedPlaying。

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

取消事件订阅

subscribe() 函数会返回一个口令，其中包含 release 方法，调用此方法会再次从事件中移除侦听程序。

myEventHandler.release('startedPlaying');

事件参考

播放器控件参考信息

您可以调用一系列函数来控制视频播放器或获取它的当前状态，例如当前播放位置。

函数	说明	参数（类型）
`play()`	播放视频。
`pause()`	暂停视频。
`seek(seconds)`	寻找指定位置。	`seconds` (`number`)
`mute()`	视频设为静音。
`unmute()`	取消视频静音。
`isMuted()`	视频设为静音时为 `true`，反之则为 `false`。
`setVolume(volume)`	将音量设置为指定数字（`float`，范围从 `0` 到 `1`）。	`volume` (`float`)
`getVolume()`	返回视频的当前音量（`float`，范围从 `0` 到 `1`）。
`getCurrentPosition()`	返回当前的视频时间位置，精确到秒。
`getDuration()`	返回视频时长，精确到秒。
`subscribe(event, eventCallback)`	为指定事件添加侦听函数。关于事件的详细信息，请参阅订阅事件部分。返回一个口令，其中包含 `release` 方法，调用此方法会再次从事件中移除侦听程序。	`event` (`string`)、`eventCallback` (`function`)

事件参考

事件	描述
`startedPlaying`	视频开始播放时触发。
`paused`	视频暂停时触发。
`finishedPlaying`	视频播放完时触发。
`startedBuffering`	视频开始缓冲时触发。
`finishedBuffering`	视频从缓冲恢复时触发。
`error`	视频发生错误时触发。