YouTubeの動画をなんらかのイベントにより途中で変更したい場合があります。
で、そのときに、どうするか？
YouTube JavaScript Player API Referenceを読むと、player.cueVideoByIdメソッドを使えばいけるようだ。
| <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" ></script> </head> <body> <script> 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 ); }, seekTo:function(n){ document.getElementById('ytPlayer').seekTo(n,true); } }); $(function(){ jQuery.loadYoutube({ id:"js_movie", playerId:"ytplayer", embedId:"ytPlayer", movieData:"nYHt8SdUj-U" }); }); function altMovie(){ document.getElementById('ytPlayer').cueVideoById('A7m2TGv6SwY'); } </script> <div id="js_movie"></div> <div> <input type="button" value="動画を変更" onclick="altMovie();"> </div> </body> </html> |
また第二引数では、秒数を指定することもできます。
かなり便利なメソッドです。
0 コメント:
コメントを投稿