FC2ブログ

複数の動画を選択可能にする

複数の動画を選択可能にする

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() はHTML5のほうじゃなくて
ユーザ関数という自作の関数

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() は何番目というのを示す擬似クラス
この中に0とか1とかの数字が入る

ここには
+currentIndex+
が入る

再生には
player.loadVideoById()
を使う
中身は
videoid をわたす

class="playing" を付けるには
$('li.movie').removeClass('playing') で
先に同じクラスがついているのを削除しておく

そして、
$('li.movie.on.eq('+currentIndex+').addClass('playing');
で追加する

addClass() はクラスを追加して
removeClass()はクラスの削除

ここまでで実行すると
選択した動画のサムネイルの枠の色と
再生しているサムネイルの枠の色が違うようになって
再生がはじまる
スポンサーサイト



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

コメント

非公開コメント

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