內嵌影片播放程式 API

您可以使用內嵌影片播放程式 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`	影片發生錯誤時會觸發此事件。