昨日のエントリーでは、YouTubeの動画をイベントによって途中で切り替える方法を書きましたが、切り替えたタイミングで、再生もしたい場合は、どうすればいいのか？
そんな場合は、player.cueVideoByIdメソッドではなく、player.loadVideoByIdメソッドを使うことによって実現することができます。
なので、ソースとしては、こんな感じ
| <!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.loadVideoById('ytPlayer').cueVideoById('A7m2TGv6SwY'); } </script> <div id="js_movie"></div> <div> <input type="button" value="動画を変更" onclick="altMovie();"> </div> </body> </html> |
0 コメント:
コメントを投稿