內嵌影片播放器 API

您可使用內嵌影片播放器 API 來控制內嵌影片播放器,以及觀察播放器觸發的事件。舉例來說,您可使用自訂按鈕來接聽影片暫停播放或是開始播放的事件。

按照以下分類主題操作就能立刻上手:

設定

1.設定外掛程式

請參閱內嵌影片播放器文件,瞭解如何設定外掛程式。

2.取得內嵌影片播放器 API 執行個體

為了取得內嵌影片播放器 API 執行個體,請接聽 xfbml.ready。如果訊息 typevideo,則該 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)

移至指定位置。

secondsnumber

mute()

將影片靜音。

unmute()

取消影片靜音。

isMuted()

如果影片為靜音狀態,則為 true,否則為 false

setVolume(volume)

將音量設為指定數字(float,等級從 01)。

volumefloat

getVolume()

傳回影片目前音量(float,等級從 01)。

getCurrentPosition()

傳回影片目前的時間位置,以秒數表示。

getDuration()

傳回影片長度,以秒數表示。

subscribe(event, eventCallback)

針對指定事件新增接聽程式函數。如需有關事件的詳細資訊,請參閱訂閱事件一節。傳回具備 release 方法的權杖,而呼叫該方法會再從該事件移除接聽程式。

eventstring)、eventCallbackfunction

事件參考資料

事件 說明

startedPlaying

於影片開始播放時觸發。

paused

於影片暫停時觸發。

finishedPlaying

於影片結束播放時觸發。

startedBuffering

於影片開始緩衝時觸發。

finishedBuffering

於影片結束緩衝時觸發。

error

於影片發生錯誤時觸發。