FC2ブログ

youtubeジュークボックスその2

まず、中央寄せにする
これは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.
これは最大取得数=10という意味

v:2
はvetsion=2 ということ

スポンサーサイト



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

コメント

非公開コメント

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