複数の動画を選択可能にする
li要素がクリックされたら
そこの色を変えて選択されているのがわかるようにする
player.loadVideoById($(this).data(‘video-id’));
はコメントアウトしておいて
処理を追記する
クリックされたのには
$(this)
で
$(this).toggleClass(‘on’);
とする
こうすると
一回クリックしたら
class=”on” がついて
もう一回クリックすると
class=”on” がはずれる
これは、jQuery で toggle というのがあり
それとおなじような動きをする
確認するために
CSSを追加
li.movie.on{
background-color:#afa;
}
li.movie.playing{
background-color:#faa;
}
li.movie.on
の場合
li 要素の中にある movie クラスのさらに中にある
on クラスという意味
li.movie.playing
も同じような意味
ここまでやったら再読込
すると、クリックする旅にサムネイル画像のまわりの色が
変わる
ここまでできたら、on が付いている要素を引っ張ってきて
頭から再生するようにする
これには、何番目の要素なのかということを保持する変数を作成
var currentIndex =0;
とする
そして、play をおされた時の処理も追記
$(‘#play’).click(function(){
play();
});
このplay() はHTML５のほうじゃなくて
ユーザ関数という自作の関数
java script PHP java Object c でも
そうだけど
プログラミングができるようになると
自作の機能を追加できるようになるのが最大メリット
play() のソースは
function play(){
//currentIndex の video id 取得
var videoid=$(‘li.movie.on:eq(‘+currentIndex+’)’).data(‘video-id’);
//再生
player.loadVideoById(videoid);
//class=”playing” も追加
}
というかんじになる
eq() は何番目というのを示す擬似クラス
この中に０とか１とかの数字が入る
ここには
+currentIndex+
が入る
再生には
player.loadVideoById()
を使う
中身は
videoid をわたす
class=”playing” を付けるには
$(‘li.movie’).removeClass(‘playing’) で
先に同じクラスがついているのを削除しておく
そして、
$(‘li.movie.on.eq(‘+currentIndex+’).addClass(‘playing’);
で追加する
addClass() はクラスを追加して
removeClass()はクラスの削除
ここまでで実行すると
選択した動画のサムネイルの枠の色と
再生しているサムネイルの枠の色が違うようになって
再生がはじまる