內嵌影片播放器 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.完整程式碼範例

在下方的程式碼範例中，我們假設您在初始化 Facebook JavaScript 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`	於影片發生錯誤時觸發。