YoutubeAPIを使って自作ページでyoutube動画を再生してみた

今回はiframeのプレイヤーを埋め込んで,それをjsで制御しました.

 

https://developers.google.com/youtube/iframe_api_reference?hl=ja

 

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

 

で,そこから先は全部jsで制御できます.

素晴らしい.

 

サンプルは上記ページに載っていますが,素のjsなので,俺はcoffeescriptで書いてみた.

 

 

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: 動画が存在しないなどのエラーが発生した場合

 

にそれぞれ呼ばれるので,関数を登録してみた.

 

 

あとは,再生が終了したら次の動画を連続でがりがり再生していくというだけの話.

 

 

 

 

これによって,DBに登録されている動画URLを取り出し,gonで渡して連続再生するというページを作りました.

 

 

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

 

 

これがいわゆる,作業用あすみんです.

 

是非暇なときにご活用ください.

 

 

 

ニコニコ動画に対しても同じようなことができたら嬉しいんだけど,何かいい方法ないかなぁ.