YouTubeをブログなどに貼り付けるときは、ページ上にあるobjectタグをコピペする方法がありますが、それとは別に、JavaScriptから動的にローディングすることも可能です。
YouTube JavaScript Player API Referenceを読むと、SWFObjectを使った実装方法があるそうです。
それを元にちょっとjQueryでソースを組んでみました。
| <!DOCTYPE html>
<html> <head> <script type="text/javascript" src="./jquery.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject_src.js"></script> <script type="text/javascript"> function onYouTubePlayerReady(playerId) { } jQuery.extend({ loadYoutube:function(args){ prms = $.extend({ width:"420", height:"345", version:"9" },args); var params = { allowScriptAccess: "always" }; var atts = {id: prms.embedId}; swfobject.embedSWF( "http://www.youtube.com/e/" + prms.movieData + "?version=3&enablejsapi=1&hl=ja_JP&playerapiid="+prms.playerId, prms.id , prms.width, prms.height, prms.version, null, null, params, atts ); } }); jQuery(document).ready(function(){ jQuery.loadYoutube({ id:"js_movie", playerId:"ytplayer1", embedId:"ytPlayer1", movieData:"R0ks1U2C6aI" }); }); </script> </head> <body> <div id="js_movie"></div> </body> </html> |
重要なところは、swfobject.embedSWFメソッドの部分。
「http://www.youtube.com/e/」は固定なのですが、その後に、videoIDをつけて、さらにパラメータを設定する必要があるということ。
上のコードでは、
「version=3&enablejsapi=1&hl=ja_JP&playerapiid=引数で設定されたplayerId」
としていて、ほぼこれは決まり文句のようなもの。
引数で設定したplayerIdは、後で、コールバック関数であるonYouTubePlayerReadyが走ったときに、確認用に使う必要があるので、ここはきちんと設定する必要があります。
atts変数に設定しているidは、こちらも後ほど、動的にYouTubeの動画変更したい場合に必要になるので、同様にきちんと設定の必要ありです。
試したところ、正常に、動画が表示されました。
こうしてテンプレみたいにしておくと後で、コピペですむので、楽かなと。
0 コメント:
コメントを投稿