先日、YouTube Player API をつかってサイトにYouTubeプレイヤーを設置する機会があったので、忘れないうちにまとめておこうと思います。
公式のAPIドキュメントは こちら にまとまっています。
プレイヤーの表示
まずは単純にプレイヤーを表示してみます。
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>YouTube Player API テスト</title> </head> <body> <!--プレイヤーに置換するタグを設置--> <div id="player"></div> <script> // プレイヤーインスタンス収納用変数 var player; // iframeAPIの準備ができたときに実行されるコールバック関数 function onYouTubeIframeAPIReady() { // プレイヤーインスタンスの作成 player = new YT.Player("player", { width : "320", // プレイヤーの幅 height : "195", // プレイヤーの高さ videoId : "1g0ebPju_eE" // 再生するビデオのID }); } </script> <!--iframeAPIを読み込み--> <script src="https://www.youtube.com/iframe_api"> </body> </html>
自動再生
つぎに自動再生機能をいれてみます。
自動再生は、onReadyにコールバック関数を登録することで実装します。
ただしiOSではユーザー操作きっかけでしかストリーミングを開始できないので再生されません。
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>YouTube Player API テスト</title> </head> <body> <div id="player"></div> <script> var player; function onYouTubeIframeAPIReady() { player = new YT.Player("player", { width : "320", height : "195", videoId : "1g0ebPju_eE", events : { // プレイヤーの準備ができたときに実行されるコールバック関数 "onReady" : onPlayerReady } }); } // プレイヤーの準備ができたときに実行されるコールバック関数 function onPlayerReady() { // プレイヤーを再生 player.playVideo(); } </script> <!--iframeAPIを読み込み--> <script src="https://www.youtube.com/iframe_api"> </body> </html>
いかがでしょうか。非常にお手軽です。
今回は初歩の初歩でしたが、まだまだ便利な機能が多々ありますので、
またの機会にひきつづき紹介していきたいと思います。