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; } });
次のコードサンプルは、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');イベントリファレンス
一連の関数を呼び出すことで、動画プレイヤーをコントロールしたり、現在の再生位置といった、プレイヤーの現在のステータスを取得したりできます。
機能 | 説明 | 引数(型) |
---|---|---|
| 動画を再生します。 | |
| 動画を一時停止します。 | |
| 特定の再生位置にシークします。 |
|
| 動画をミュートします。 | |
| 動画のミュートを解除します。 | |
| 動画がミュートされている場合は | |
| 指定した数値に音量を設定します( |
|
| 動画の現在の音量を返します( | |
| 現在の動画の再生位置を秒数で返します。 | |
| 動画の長さを秒数で返します。 | |
| 指定されたイベントに対するリスナー関数を追加します。イベントに関する詳細は、「イベントのフィードの購読」セクションをご覧ください。 |
|
Event(イベント) | 説明 |
---|---|
| 動画の再生が始まったときに実行されます。 |
| 動画が一時停止されたときに実行されます。 |
| 動画の再生が終わったときに実行されます。 |
| 動画のバッファーへの保存が始まったときに実行されます。 |
| 動画のバッファーへの保存から回復したときに実行されます。 |
| 動画でエラーが発生したときに実行されます。 |