FC2ブログ

動画コントロールの実装


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 で終了するという処理もあるので
覚えておくと楽

スポンサーサイト



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

コメント

非公開コメント

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