埋め込み動画プレイヤーのAPI

Embedded Video Player APIを使用すると、埋め込み動画プレイヤーをコントロールしたり、プレイヤーでトリガーされたイベントを監視したりできます。たとえば、カスタムボタンを使用した動画再生の一時停止や開始といったイベントをリッスンするよう設定することもできます。

これを行うには、以下のステップを実行します。

設定
プレイヤーコントロール
イベントのフィードの購読
プレイヤーコントロールリファレンス

設定

1.プラグインを設定する

プラグインの設定方法については、「埋め込み動画プレイヤー」に関するドキュメントをご覧ください。

2.Embedded Video Player APIインスタンスを取得する

Embedded Video Player 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.詳細なコードサンプル

次のコードサンプルは、JavaScript用Facebook SDKの初期化の際に、アプリIDを使用することを前提としています。アプリIDをまだ取得していない場合は、アプリIDの作成に関するドキュメントをご覧ください。

コードサンプルの{your-app-id}は自分のアプリIDに、data-hrefは動画のURLに置き換えます。関数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>

プレイヤーが複数ある場合の処理

1つのページに複数のプレイヤーを使用する場合は、動画プレイヤータグにid属性を追加することで動画プレイヤーを特定できます。idはmsgオブジェクトで確認できます。

<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`)

イベントリファレンス

Event(イベント)	説明
`startedPlaying`	動画の再生が始まったときに実行されます。
`paused`	動画が一時停止されたときに実行されます。
`finishedPlaying`	動画の再生が終わったときに実行されます。
`startedBuffering`	動画のバッファーへの保存が始まったときに実行されます。
`finishedBuffering`	動画のバッファーへの保存から回復したときに実行されます。
`error`	動画でエラーが発生したときに実行されます。