できればjQueryだけでリストから任意の場所にYoutubeの動画を埋め込む part4

2015/09/14 追記 現在youtubeのAPIはv3に移行しており、v2の時のこの記事の書き方では動作しません。詳細は下記ブログカードより
PHP: Youtube Data API v3にて動画情報をJSONで取得して表示する
以前、Youtube Data API v2の時にfeedを取得して動画を表示するというスクリプトを書いたんですが、v2のサービスが終了しv...
PHP: Youtube Data API v3にて動画情報をJSONで取得して表示する part2 キーワードで検索する
前回、PHPにて自分がデータ化しておいた動画IDの配列で、Youtubeの動画をチェックして出力し、すでに削除されているであろう動画IDを見...

この記事は以前管理していたサイトで公開していたものを再公開するものです。
また基本的な部分、例えばdocktypeやmeta、body、footerなどはhtmlで骨組みを作っていますが、できるだけjQueryのみでhtmlも追加し処理しています。


サンプルページ: http://blazechariot.php.xdomain.jp/playground/sample004.php
※part4となっているのは、元々part1から4本立ての記事でしたが、それぞれ単体でも動作するのでpart4から記載しています。

コメントの、「// 無理やり部分はここまで —————————–」でHTMLをjQueryから作っています。

ここでは、inputフォームに何かしらのキーワードが入力されて、キーボードのenterが押されたら動画リストの取得を始めるという感じにするため、keypress(キーが押されたら)で 「e.which === 13 が真(true)であれば」、つまりenterkey = 13が押されたら処理を始めるという手法を使っています。
ここはいろんな方法が考えられます。キーを押した時か離した時、あるいはもっと他にもいくつか方法があったはずですがここでは割愛します。

inputフォームの値はval()で取得できます。

delkeyは、検索した時に除外するキーワードです。とある所で、マイナスキーワード(除外するキーワード)は+で連結するというのを見たので必要のないものを+で連結しています。
inputフォームで入力されたキーワードとdelkeyを連結して検索するためのキーワードを設定するのが keywordallです。

取得するデータ(サムネイルやリンクアドレス)などは、YoutubeのAPIからjsonで10件取得します。

$.getJSONでyoutubeのAPIにアクセスして取得した10件のデータをlist_dataに入れていくために、$.eachにて処理をします。

この部分で、動画IDを取り出しています。

動画プレイヤー表示部分では、最初(画面上部)のリストを選択した時、更にその動画から関連リストを作るため、同じ処理をもう一度書いています。これらはベタ書きしていますが、functionなどにまとめるとスッキリするだろうと思います。

このような感じで、極簡易的なYoutubeもどきのサイトがほぼjQueryのみで作成できます。
Youtubeに行くまででもなく、ちょっと調べたい動画があると言う時などは案外便利に使えたりもしますが、思った通りの動画が取得できるかどうかはまた別のアイデアが必要になるかも知れません。

スポンサーリンク

シェアする

フォローする