再生の処理
まず、イベントを設定する
<li class=”movie”>に click イベントを設定する
liは動的に生成されるので
on()を使う
これは jQuery の関数で
動的に追加されたもの、つまり
プログラムで後付けで追加した要素に
イベントを追加することができる
引数の解説としては
追加するイベント
対象の要素
イベント内容
ということになる
今回なら
追加イベントが ‘click’ でクリックイベント
対象要素が ‘li.movie’
イベント内容が function(){} の中身となる
書く時に参考になるのが
リファレンスで
Player APIs > JavaScript API > Queueing functions
https://developers.google.com/youtube/js_api_reference#Queueing_Functions
これを使うことで、動的に追加された要素で再生ができるようになる
今回はいきなり再生することのできる
loadVideoById() を使う
この場合
player.loadVideoById();
とする
ここへIDをわたすので
<li class=”movie”> の video-id でアクセスできるので
クリックされているのは this で引っ張ってこれるので
$(this).data(‘video-id’)
というようにする
このあたりをソースにすると
$(document).on(
‘click’,
‘li.movie’,
function() {
player.loadVideoById($(this).data(‘video-id’));
}
);
これで、サムネイル画像をクリックすることで
Youtube の動画が再生されるようになる
あとは連続で再生ができるようにしたりすす