動画コントロールの実装

http://dotinstall.com/lessons/youtube_jukebox_js/7612
を参考に動画コントロールの実装
これで、一時停止とか次、前、などのボタンも使えるようにする
next
prev
に関しては
currentIndex を増やしたり減らしたりすることで実装可能
まずは一時停止
$(‘#pause’).click(function(){
player.pauseVideo();
}
これは、そのままAPIをつかう
次に、nextボタン
これは currentIndex を増やせばいい
ただし、最初からとは限らないので
if で分岐処理する
$(‘#next’).click(function(){
if(currentIndex ==$(‘li.movie.on’).lenght -1 ){
currentIndex=0;
}else{
currentIndex++;
}
play();
}
これは、currentIndex が配列で
配列は0から始まる
$(‘li.movie.on’).lenght -1
つまり1になるなら、currentIndex==0
となる
それ以外なら currentIndex を増やす
そして、その状態で play() を実行すれば
再生される
ちなみに、play() はユーザ関数
つまり、自作の関数となる
そして、次は prev つまり前に戻るというもの
ただし、1番最初なら戻ってしまうのはまずいので
1番最初なら何もおきないようにしておく
$(‘#prev’).click(function(){
if(currentIndex ==0){
return false;
}else{
currentIndex–;
play();
}
});
currentIndex ==0 というのは
最初という意味
配列は0から開始なので、0なら最初になる
currentIndex– というのは
1減らすという意味
return false;
これはなにもしないということ
HTML5の API を使う時に
return で終了するという処理もあるので
覚えておくと楽

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です