YoutubeAPIを使ってyoutube動画を連続再生する

こんばんは,@h3_potetoです.

ある日唐突にYoutube動画を作業用BGM的に使いたくなったので,jsから埋め込みのyoutube playerを制御して連続再生させてみました.

http://www.asumi.ch/movies/streaming

youtubeの埋め込みプレイヤー自体は,公式ページからもリンクが生成できたりするので,簡単に使えると思います. 今回は,そんなメジャーなiframeプレイヤーを埋め込んでみました.

まず必要なことは,playerを貼り付けるためのdivをあらかじめhtml内に用意しておきます.

<div id="player"></div>

で,そこから先は全部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を配列にしておいて,ランダムで一個取り出すようにしておけば,連続再生できます.