カテゴリー: YouTube API

連続再生の設定
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 の再生の枠ができる
ただし、まだ何も再生できないので、この処理はまた次に行います

検索結果をきれいに表示する
li要素が追加できたので
次にソートする
jQuery のget オプションにわたす場合は
エンコーディングしてくれる
つまり、encordeURIComponent()
してしまうと２重エンコードになってしまうため
その場合、意図しない動きになる
“q”: encodeURIComponent($(‘#q’).val()),
を
“q”: $(‘#q’).val(),
にする
そして縦にならんでいるので
これを変える
あと、新しいものを検索したら、どんどん追加されるので
一度クリアすることも実装していく
このクリア方法は
$(‘#list’).empty();
とすればOK
これを for のループ処理前に追記する
empty() は中身を消去する
で、取得できたリストを縦から横並びへ変更するには
CSSで設定を行う
これはHTMLファイルならstyle タグで行う
ソースにすると
ul{
list-style-type:none;
padding:0;
margin:0;
}
list-style-type:none;
を設定することで
・という印を消すことができる
padding:0;
margin:0;
は余白をなくす設定
そして、検索結果を横並びにするソースが
li.movie{
float;left;
width:120px;
padding:10px;
}
li.movie
これは、
li class=”movie”
という意味
CSS では .はクラス名という意味なので
要素名.クラス名
というかき方をする
なので
li 要素の movie クラスという意味になる
float;left;
これで、左寄せになり、続く要素がその右側にくるようになる
通常は、下にどんどん追加されるけど
これを指定すれば、右側にどんどん追加されていく
http://hac-design.com/css/float.html
を参考にしました
width:120px;
padding:10px;
これは幅と余白の設定
画像の幅＝120px
余白=10px
ということ

検索結果からリスト作成
ドットインストールをみてメモ
今後、APIでリスト化するのにつかうことになりそう
http://dotinstall.com/lessons/youtube_jukebox_js/7606
ajaxで結果取得できたので
次に
li 要素を動的に生成する
まずは for でまわす
for(var i=0; i<rs.feed.entry.length; i++)
rs.feed.entry.length は取得した大きさのぶん
という意味
length となっていてれば
たいていは最大量まで繰り返すことができる
このループの中で li要素を追加したいので
$(‘#list’).append(
$(‘<li class=”movie”>’)
);
とする
append() は要素を子要素として追加するというもの
#list は
id=”list” のものという意味
つまり、
#list のところへ
li 要素の class=”movie”を追加するということになる
つまり
<ul id=list>
だったのが
<ul id=”list”>
<li class=”movie”></ul>
</ul>
になる
さらにこれにソースを追加する
$(‘#list’).append(
$(‘<li class=”movie”>’)
);
から
var r =rs.feed.entry[i];
というように結果を変数に格納し
$(‘#list’).append(
$(‘<li class=”movie”>’).append(
$(‘<img>’).attr(‘src’,f[‘media$group’][‘media$thumbnail’][0][‘url’])
);
とする
.append($(‘<img>’).
で
<img> を追加して
attr(‘src’,f[‘media$group’][‘media$thumbnail’][0][‘url’])
で img の src=”” の内容を
f[‘media$group’][‘media$thumbnail’][0][‘url’]
としている
プログラムで追加された部分をソースにしてみると
<ul id=list>
だったのが
<ul id=”list”>
<li class=”movie”></ul>
</ul>
になって、今回の追加部分で
<ul id=”list”>
<li class=”movie”>
<img src=”f[‘media$group’][‘media$thumbnail’][0][‘url’]”/>
</ul>
</ul>
になる
これで li要素へサムネイル画像を設定できる
そして、まだ続きがある
<li class=”movie”>と video id と紐付ける
これは jQuery をつかう
data命令をつかってこれを行う
data(‘video-id’,f[media$group’][‘yt$videoid’][‘$t’]);
これで、検索結果を #list へ追加するソースは
$.get(url, options, function(rs) {
console.log(rs);
for (var i=0; i<rs.feed.entry.length; i++) {
var f = rs.feed.entry[i];
$(‘#list’).append(
$(‘<li class=”movie”>’).append(
$(‘<img>’).attr(‘src’, f[‘media$group’][‘media$thumbnail’][0][‘url’])
).data(‘video-id’, f[‘media$group’][‘yt$videoid’][‘$t’])
);
}
}, “json”);
});
となる

search ボタンがクリックされたときに
起動するよう設定を追加
$(‘#search’).click(function(){
}
を追加する
get形式で取得するので
$.get() になる
この関数の
第一引数にはURL
第２引数にオプション
第３引数に、返ってきた結果を処理する関数
第４引数に、返ってくるデータの形式
となる
今回は、これらのパラメータを変数に格納してあるので
記述するのが楽
上から順番に
url
options
function(rs){}
“json”
結果は rs に入っているので
console.log(rs);
これで結果がでるけど
まだ div の再生範囲にはでてこない
結果の確認には
java script console で確認となる
このツールのだし方は
google chrome なら
ツール > java script コンソール
でだすことができます
そして使うものを探す
探すのは
サムネイルビデオIDになる
場所は
feed > entry > media$group の中にある
サムネイルは
media$thumbnail
ビデオIDは
yt$videoid
となるらしい

まず、中央寄せにする
これはCSSで設定
head タグの中へ
<style>
body{
test-align:center;
}
</style>
とする
test-align:center;
は中央寄せという意味
次に、この設定に
#player{
width:640px;
height:368px;
}
というように、画面の大きさを設定
最初の＃は
id を意味している
id=”player”
なら
#player
id=”pause”なら #pause となる
ちなみに、なにも表示していない場合
ブラウザを最大化するとなにもない画面になっている
コントロールするためのスクリプトは
メンテを考えて外部ファイルを作成し読み込む
java script の構文は
$function(){
//処理
});
というかんじになる
youtubeの API のリファレンスがあり
それは
https://developers.google.com/youtube/
ドットインストールに解説があったので
参考にさせていただきました
https://developers.google.com/youtube/2.0/developers_guide_protocol_api_query_parameters
これが検索時のパラメータ一覧
今回は、java script ファイルの編集
まずは Youtube API を使ってみた
使ったのはver 2.0
使う項目は
Retrieving and Searching for Video
の中にある
API　Query Palameters
GETを使いベースURLへアクセス
そのときにオプションを付ける
ベースURLを変数へ格納する
var url =”https://gdata.youtube.com/feeds/api/videos”;
そして、オプションも変数へ格納
var options ={
q: encodeURIComponent($(‘#q’).val()),
alt: “json”,
max-results:10.
v:2
};
q は検索キーワード
$(‘#q’) は
＃はid の意味なので
id=”q”
val() はその値
つまり、
<input type=”text” id=”q”>
で入力した検索キーワードということ
q:$(‘#q’).val();
だと、文字化けなどの問題もあるので
エンコードする
これを解決する関数が
encodeURIComponent()
なので、
q: encodeURIComponent($(‘#q’).val()),
alt: “json”, は
データ形式を json に指定
他にもXMLなどがある
max-results:10.
これは最大取得数＝１０という意味
v:2
はvetsion=2 ということ

ドットインストールで
youtbe API でジュークボックスを作成というのがあり興味深いので
実践開始
http://dotinstall.com/lessons/youtube_jukebox_js
まず、再生領域を div で設定
基本的に div は範囲を指定するときによく使う
<div id=”player”>
次に、入力項目作成
これは
input でつくる
<input type=”text” id=”q”>
<input type=”button id=”search” value=”search”>
そしたら、次に再生関連ボタンをinput で作成
<hr>
<input type=”prev” id=”prev” value=”prev”>
<input type=”button” id=”play” value=”play”>
<input type=”pause” id=”pause” value=”pause”>
<input type=”stop” id=”stop” value=”stop”>
<input type=”next” id=”next” value=”next”>
</hr>
そして、サムネイル画像を表示したいので
これは領域を ul で指定する
<ul id=”list”>
</ul>
なぜ ul かというと、java script でコントロールできるから
つまり、java script でリスト作成できる
あとは、見た目とかよくしたいので
jquery をつかう
なので、
<script src=”http://code.jquery.com/jquery-1.7.2.min.js”></script>
で読み込む