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

播放器控制參考資料

您可呼叫一組函數來控制影片播放器或取得其目前狀態，如目前播放位置。

事件參考資料