連続再生の設定とユーザビリティ

連続再生の設定

https://developers.google.com/youtube/iframe_api_reference#Events
のリファレンスの中にある
onStateChange

この中にあるプレイヤーが終わった時を意味する
０(ended)
を使う

そして、これは定数が用意されているので
こちらを使うことにする
YT.PlayerState.ENDED

これを追加するには
プレイヤーを初期化する関数の
function onYouTubePlayerAPIReady() の中へ
イベントを追記する

events:{
onStateChange: onPlayerStateChange
}

そして、
function onPlayerStateChange(e){
if(e.data == YT.PlayerState.ENDED){
$('#next').trigger('click');
}
}
というようにする

if(e.data == YT.PlayerState.ENDED)
は
動画の再生が終了になったら
という意味

onPlayerStateChange
はユーザ関数で、
このように関数にしておけば使いまわしもできるし
処理を書く時に関数を書くだけでよくなる

これで実行すると、エンドレスで動画が流れる

ここまできたらユーザビリティの改良

ロードしたら自動的に検索するところにフォーカスを当てる
これはアンケートサイトとかでもよく使われる

$('#q').focus();
これで、
input id="q"
となっているので、
ここの部分に
focus() によってフォーカスがあたるようになる

記述するのは、java script ファイル


さらに、いちいち検索ボタンをおさずに
google の検索とかみたいにEnter 押せばよいようにする
これは
HTMLファイルの入力のところをフォームにすればいい

このときに、onsubmit="return false;"
とすれば、画面遷移しなくなる

また、変更に伴い
<input type="button" id="search" value="Search">
は
<input type="submit" value="search">
とする

form 自体のソースは
<form id="search" onsubmit="return false;">
<inpout type="text" id="q">
<input type="submit" value="Search">
</form>

これにより
java script ファイルのほうも変更が必要
これは
click 扱いから submit になったため

なので
$('#search').click(function(){
ではなく
$('#search').submit(function(){
となる

動画コントロールの実装

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 が配列で
配列は０から始まる

$('li.movie.on').lenght -1
つまり１になるなら、currentIndex==0
となる

それ以外なら currentIndex を増やす
そして、その状態で play() を実行すれば
再生される
ちなみに、play() はユーザ関数
つまり、自作の関数となる


そして、次は prev つまり前に戻るというもの
ただし、１番最初なら戻ってしまうのはまずいので
１番最初なら何もおきないようにしておく

$('#prev').click(function(){
if(currentIndex ==0){
return false;
}else{
currentIndex--;
play();
}
});

currentIndex ==0 というのは
最初という意味
配列は０から開始なので、０なら最初になる

currentIndex-- というのは
１減らすという意味

return false;
これはなにもしないということ

HTML５の API を使う時に
return で終了するという処理もあるので
覚えておくと楽

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

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

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()はクラスの削除

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

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

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

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

あとは連続で再生ができるようにしたりすす

http://dotinstall.com/lessons/youtube_jukebox_js/7608
を参考に Youtube API を使ってみます

2012年7月19日に仕様変更があり
onYouTubePlayerAPIReady が onYouTubeIframeAPIReady に変更

でもまだ
onYouTubePlayerAPIReady
は使えるらしい

いずれは使えないかもしれないけど

また、ベースURLも
http://www.youtube.com/player_api
から
http://www.youtube.com/iframe_api
に変更だけど
こちらも前のものが使える状態

サムネイルがクリックされたら
動画再生領域の div のところに再生が始まるようにする

これには
YouTube Player Tools > Player APIs >
IFrame API を使う

リファレンスは
https://developers.google.com/youtube/iframe_api_reference

要約すると
div で領域を設定して
スクリプトを読み込み
初期化していろいろやる

ということで必要な java script ファイルを読み込むため
<script src="http://www.youtube.com/player_api"></script>
をHTMLファイルに追記する

そして、java script ファイルで
プレイヤーに関する変数を用意して

function onYouTubePlayerAPIReady(){}
を用意する

ということで
ファイルの最初のあたりに
var player;
を追記して

最後のほうで
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: 360,
width: 640
});
}
を追加

height: 360,
width: 640
は幅と高さを設定

これで、F５で再読込すると
Youtube の再生の枠ができる

ただし、まだ何も再生できないので、この処理はまた次に行います