佐藤フィルターで使ったあれこれの話(Youtube Player API その1)

先日、デザイナーの佐藤ねじさんからお話をいただいてこんなもの作った

佐藤フィルター

ねじさんが得意な一発ネタ系サイトで、内容としては「横浜駅周辺で"佐藤さ～ん！"と呼びかけて、どのくらいの人数が振り向くか」を動画で撮影して公開するというなんともいい感じにバカおもろい企画だった
かく言う自分も佐藤なんだが、わけあって当日の撮影には参加できなかった、無念

で、このサイト、公開日に縛り(3/10=佐藤の日)があり、かつページのシンプルなデザインとは打って変わって手の込んだ実装となったために、公開日直前は死にかけた。

そのメモ(主にYoutube Player API)を残しておく。ちなみにYoutube Player APIのリファレンスはこちら(YouTube JavaScript Player API リファレンス - YouTube — Google Developers)

<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var params = {allowScriptAccess: 'always'};
var attrs = {id: 'myMov'};
swfobject.embedSWF('http://www.youtube.com/v/FidK-hgq_qY?loop=1&amp;controls=0&amp;enablejsapi=1&amp;playerapiid=mov1&amp;version=3&amp;rel=0&amp;disablekb=1&amp;start=0&amp;autoplay=0&amp;showinfo=0&amp;iv_load_policy=3','elmMov1', '640', '360', '8', null, null, params, attrs);
</script>

<div id="elmMov1" class="videoElm"></div>

とりあえずこれだけあれば動画は表示される。はず。
解説していくと、まずswfobject.jsのincludeが必須。また、embed時に渡すパラメータとして「allowScriptAccess: 'always'」が必要。そんでattrに、操作するplayerのidを渡しておく。↑の例だと、myMovがplayerのオブジェクトとなり、こっからメソッド叩いて再生とか一時停止とかする。
次にsefobjectのembedSWFで再生する動画のURLと各種パラメータを指定する。大事なのは

enablejsapi=1
playerapiid=mov1
disablekb=1

この辺。上から説明すると

• enablejsapi=1

そのまんま。youtube player APIによる操作を有効にする

• playerapiid=mov1

値は任意。動画の読み込みが完了した際にonYouTubePlayerReadyという名前で関数を宣言しておくと、関数が実行されその引数にこのplayerapiidがセットされる。佐藤フィルターでは、ここでセットしたidの数字からattrのidを決定し、操作している。

• disablekb=1

そこまで重要ではないが、youtubeが実装しているキーボードショートカット(スペースキーで一時停止/再生とか)を拒否することができる

ふー疲れた。あんまり長くすると読み手も疲れるからね(言い訳)。続きは次回書くことにしましょう。今回はまだ、ただembedしただけになってるので、次回はjs側から再生を制御するところについて。多分あと1回で終わると思います。ではではー