內嵌影片播放程式 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');

播放程式控制項參考資料

您可調用一組函數，以控制影片播放程式或取得其目前狀態，如目前播放位置。

事件參考資料