Youtube動画の複数埋め込み+inview時再生
以下2つのリンクを参考に私なりにアレンジして、複数動画の埋め込み+inview時自動再生を試してみました。
参考
埋め込んだYouTubeでFacebookみたいな動画自動再生を実装した話。スクロールで再生するやつ - Qiita
同一ページ内でYouTubeを複数設置したときに、同時再生をさせないようにする | cly7796.net
html**
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Youtube複数埋め込み、inview時に再生</title> <script type="text/javascript" src="js/jQuery1.8.2.js"></script> <style> *{margin:0; padding:0;} ul{margin:500px 0 1000px; text-align:center;} li{margin-bottom:500px;} </style> </head> <body> <ul> <!-- .video01 --> <li class="each_area video01"> <div id="player01"></div> </li><!-- .each_area --> <!-- .video02 --> <li class="each_area video02"> <div id="player02"></div> </li><!-- .each_area --> <!-- .video03 --> <li class="each_area video03"> <div id="player03"></div> </li><!-- .each_area --> <!-- .video04 --> <li class="each_area video04"> <div id="player04"></div> </li><!-- .each_area --> </ul> <script> // プレーヤーのサイズを指定 var ytWidth = 640; var ytHeight = 390; // var ytEvent = { // "onReady": function(event){ // // ミュート設定をする // event.target.mute() // } // }; var ytEvent = { "onReady": function(event){ // 音あり設定をする } }; // 埋め込むyoutubeのIDと埋め込むエリアを指定 var ytData = [ { id: 'z8Kt1gXL_2M', area: 'player01' }, { id: 'gjEBGJVgCTE', area: 'player02' }, { id: 'BA8hry-UjY0', area: 'player03' }, { id: 'McRmF9ccjUA', area: 'player04' } ]; var ytPlayer = []; var ytPlaying, ytStop, ytPlay; // YouTube Player APIを読み込む var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // API読み込み後に、各エリアにプレーヤーを埋め込む function onYouTubeIframeAPIReady() { for(var i = 0; i < ytData.length; i++) { ytPlayer[i] = new YT.Player(ytData[i]['area'], { height: ytHeight, width: ytWidth, videoId: ytData[i]['id'], events: ytEvent }); } } // スクロールイベント window.addEventListener("scroll", function() { for(var i = 0; i < ytData.length; i++) { // var thisState = ytPlayer[i].getPlayerState(); var thisPlayer = ytPlayer[i]; console.log(thisPlayer); // 画面内にプレイヤーがあるかを判定 // 画面内にプレイヤーがあるかを判定 if (window.scrollY < thisPlayer.getIframe().offsetTop && window.scrollY + window.screen.height > thisPlayer.getIframe().offsetTop + thisPlayer.getIframe().offsetHeight) { // 動画再生 thisPlayer.playVideo() } else { // 動画停止 thisPlayer.pauseVideo() } } }) </script> <script src="https://www.youtube.com/iframe_api"></script> </body> </html>