FC2ブログ

サムネイルをクリックしたときの再生処理

再生の処理
まず、イベントを設定する

<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 の動画が再生されるようになる

あとは連続で再生ができるようにしたりすす
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック