YoutubeAPIを使ってyoutube動画を連続再生する
こんばんは,@h3_potetoです.
ある日唐突にYoutube動画を作業用BGM的に使いたくなったので,jsから埋め込みのyoutube playerを制御して連続再生させてみました.
http://www.asumi.ch/movies/streaming
youtubeの埋め込みプレイヤー自体は,公式ページからもリンクが生成できたりするので,簡単に使えると思います. 今回は,そんなメジャーなiframeプレイヤーを埋め込んでみました.
まず必要なことは,playerを貼り付けるためのdivをあらかじめhtml内に用意しておきます.
で,そこから先は全部jsで制御できます.
素晴らしい.
サンプルは以下のページに載っていますが,素のjsなので,ちょっと手をかけてcoffeescriptで書いてみた. https://developers.google.com/youtube/iframe_api_reference?hl=ja
html内で以下の記述をすると,動画の準備を始めてくれて,jsファイル内に書かれている,onYoutubeIframeAPIReady関数を呼び出します.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
そして,作成するplayerにいろんな設定を付与できる.
動作的に重要なのは,eventsのオプション.
onReady: 初回ロード時
onStateChange: 一時停止,再生,終了など,プレイヤーのステータスに変化があったときに
onError: 動画が存在しないなどのエラーが発生した場合
にそれぞれ呼ばれるので,関数を登録してみた.
onStateChangeのときに動画終了かどうかを判定し,次の動画を再生するplayNext関数を呼び出します. あとは,youtubeを配列にしておいて,ランダムで一個取り出すようにしておけば,連続再生できます.