Youtubeで、ページスクロールしてブラウザに現れたときに再生を始めるJavascript
ちょっと頼まれたので作ったコードです。
jQueryにはLazyLoadなる画像の後読みのプラグインがありますが
あれは画像の表示されたら画像を読みにいくっていうことで
無駄な読み込みを減らす事ができたりするってことでしたが
(結局のところ読みこんじゃうらしいですね)
Youtubeの動画をページに埋め込んで、スクロールして
表示されたときに、再生してくれたらいいなってことで
jQueryのLazyLoadをコードを眺めていたら
どうもスクロール位置が云々している様子。
だったら、スクロールイベントで、動画を貼付けた位置になったら
再生させればいいんじゃね?ってことで
じゃあ、再生コントロールはどうしたかっていうと、
YouTube JavaScript Player APIってのがあるので、これを利用。
設定的には動画の表示が画面の2/3を超えたら再生を始めるようにしました。
また、リロードで動画の表示位置からいきなり始まったときは
スクロールをちょっとすると反応するようです。
ってことで、プラグインではないけど作ったコードをさらしておきます。
何かの参考にしてみてくださいw
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <!-- 設定 --> <script type="text/javascript"> var youtube_video_id="nCCbRsXB6ng"; var youtube_video_width= "320" var youtube_video_height= "330" var youtube_video_volume= 10; </script> <script type="text/javascript"> function onYouTubePlayerReady(playerId) { ytplayer1 = document.getElementById("myytplayer"); } $(document).ready(function(){ var use_youtube_video_width; var use_youtube_video_height; var use_youtube_video_volume; if( typeof youtube_video_width != "undefined" ) use_youtube_video_width =youtube_video_width else use_youtube_video_width = "400" if( typeof youtube_video_height != "undefined" ) use_youtube_video_height =youtube_video_height else use_youtube_video_height = "330" if( typeof youtube_video_volume != "undefined" ) use_youtube_video_volume =youtube_video_volume else use_youtube_video_volume = "0" var params = { allowScriptAccess: "always" }; var atts = { id: "myytplayer" }; swfobject.embedSWF("http://www.youtube.com/v/"+youtube_video_id+"?enablejsapi=1&playerapiid=ytplayer","ytapiplayer",use_youtube_video_width, use_youtube_video_height, "8", null, null, params, atts); var youtube_hello_flg=false; $(window).scroll(function () { if(youtube_hello_flg==false){ var scroll_y = document.documentElement.scrollTop || document.body.scrollTop; var off = $('#youtube_moviestart_trigger_tag').offset(); var win_height = $(window).height() if(off.top<=(scroll_y + win_height/3*2) && youtube_hello_flg==false){ if( typeof ytplayer1 != "undefined" ){ youtube_hello_flg=true; ytplayer1.playVideo(); //再生開始(自動再生) ytplayer1.setVolume(use_youtube_video_volume); //音量を20に設定 } } } }); }); </script> 3<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 2<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 1<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 0 <!-- youtube動画 --> <div id='youtube_moviestart_trigger_tag' align='left' style='margin: 5px 20px 0;float:left;'> <div id='ytapiplayer'> You need Flash player 8+ and JavaScript enabled to view this video.</div> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>end