Q&A
YouTube動画の動画WEBサイト内に埋込、サムネイル画像切替とページ内のYouTube動画を同時で再生出来ない仕様にしたいです。
下記の参考サイトを元に試しましたが、サムネイル画像切替は上手くいきますが、同時再生を行わないようにするこが出来ません。
同時再生のコードを書き込むと、サムネイル画像切替が動かなくなってしまいます。
▼参考サイト
https://cly7796.net/blog/javascript/it-is-not-the-simultaneous-playback-of-youtube/
https://cly7796.net/blog/javascript/switch-the-youtube-videos/
◎今回行いこと
・YouTube動画をサムネイルクリックで切り替える
・複数設置したときに、同時再生をさせないようにする
▼自分が記述したコード（HTML）
<html> <head> <meta charset="utf-8"> <title>YouTube動画埋め込み 検証サイト</title> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href="./css/style.css"> <link rel="stylesheet" href="./css/youtube_play.css"> <link rel="stylesheet" type="text/css" href="./css/slick.css"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> </head> <body> <!-- YouTubeサムネイル画像切替 --> <div class="pc_onle"> <div class="box"> <div id="player"></div> </div> <div class="kobox"> <ul id="thumbnail"></ul> </div> </div> <!-- YouTubeサムネイル画像切替 --> <div class="sp_onle"> <div id="slider" class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <iframe width="300" height="200" src="https://www.youtube.com/embed/XB_iA1791rk?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <div class="swiper-slide"> <iframe width="300" height="200" src="https://www.youtube.com/embed/Gah14eVPgNA?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <div class="swiper-slide"> <iframe width="300" height="200" src="https://www.youtube.com/embed/v2LOGEbP1NE?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <div class="swiper-slide"> <iframe width="300" height="200" src="https://www.youtube.com/embed/ztG7xY2_UwM?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> <div class="swiper-button-prev swiper-button-white"></div> <div class="swiper-button-next swiper-button-white"></div> </div> <div id="thumbs" class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <!-- YouTube動画サムネイル --> </div> <div class="swiper-slide"> <!-- YouTube動画サムネイル --> </div> <div class="swiper-slide"> <!-- YouTube動画サムネイル --> </div> <div class="swiper-slide"> <!-- YouTube動画サムネイル --> </div> </div> </div> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="./js/youtube_play.js"></script> <script> <!-- var slider = new Swiper ('#slider', { nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev' }) var thumbs = new Swiper('#thumbs', { speed: 5000, slidesToShow: 1,//スライドを画面に1枚見せる slidesToScroll: 1,//1回のスクロールで3枚の写真を移動して見せる centeredSlides: true, spaceBetween: 10, slidesPerView: "auto", touchRatio: 0.2, slideToClickedSlide: true, }); slider.params.control = thumbs; thumbs.params.control = slider; --> </script> </body> </html>
▼自分が記述したコード（js）
// プレーヤーのサイズを指定 var ytWidth = 640; var ytHeight = 390; // 埋め込むyoutubeのIDを指定 var ytData = [ { id: 'XB_iA1791rk' area: 'swiper-slide' }, { id: 'Gah14eVPgNA' area: 'swiper-slide' }, { id: 'v2LOGEbP1NE' area: 'swiper-slide' }, { id: 'cv3AQbbZotY' area: 'swiper-slide' } ]; ytBaseUrl = 'https://www.youtube.com/embed/'; // サムネイル画像の埋め込み準備 var thumbInsert = ''; for(var i = 0; i < ytData.length; i++) { thumbInsert += '<li><a href="' + ytBaseUrl + ytData[i]['id'] + '">'; thumbInsert += '<img src="http://img.youtube.com/vi/' + ytData[i]['id'] + '/mqdefault.jpg" alt="" />'; thumbInsert += '</a></li>'; } var ytPlayer = []; var ytPlaying, ytStop, ytPlay; var ytPlayer; // 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() { ytPlayer = new YT.Player('player', { height: ytHeight, width: ytWidth, modestbranding: 1, videoId: ytData[0]['id'], playerVars: { rel: 0 } }); } // 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: { 'onStateChange': onPlayerStateChange } }); } } // プレーヤーの状態に変化があった時に実行 function onPlayerStateChange(event) { // 各プレーヤーの状態を確認 for(var i = 0; i < ytData.length; i++) { var thisState = ytPlayer[i].getPlayerState(); if( thisState == 1 && ytPlaying == undefined) { ytPlaying = i; } else if(thisState == 1 && ytPlaying != i) { ytStop = ytPlaying; ytPlay = i; } else { } } // 同時再生があった場合、元々再生していた方を停止する if(ytStop != undefined) { ytPlayer[ytStop].pauseVideo(); ytStop = undefined; } // 現在再生中のプレーヤー番号を保存しておく if(ytPlay != undefined) { ytPlaying = ytPlay; ytPlay = undefined; } } // 動画の再生 function play(ytId, seekTime) { ytPlayer.loadVideoById(ytId, seekTime); } $(function() { // サムネイル画像の埋め込み $('#thumbnail').append(thumbInsert); $(document).on('click', '#thumbnail a', function() { ytId = $(this).attr('href').replace(ytBaseUrl, ''); play(ytId, 0); return false; }); });
色々と模索してやってみたのですが上手くいきません.....何卒ご教授よろしくお願いいたします。
回答1件
0
YouTube動画の動画WEBサイト内に埋込、サムネイル画像切替とページ内のYouTube動画を同時で再生出来ない仕様にしたいです。
質問文内のコードのjs内には、同じ「onYouTubeIframeAPIReady」という名前の関数が2つありますが、このうち2つ目を削除します。
diff
1// API読み込み後にプレーヤーを埋め込む 2function onYouTubeIframeAPIReady() { 3 ytPlayer = new YT.Player('player', { 4 height: ytHeight, 5 width: ytWidth, 6 modestbranding: 1, 7 videoId: ytData[0]['id'], 8 playerVars: { 9 rel: 0 10 } 11 }); 12} 13 14-// 削除 15-// API読み込み後に、各エリアにプレーヤーを埋め込む 16-function onYouTubeIframeAPIReady() { 17- for(var i = 0; i < ytData.length; i++) { 18- ytPlayer[i] = new YT.Player(ytData[i]['area'], { 19- height: ytHeight, 20- width: ytWidth, 21- videoId: ytData[i]['id'], 22- events: { 23- 'onStateChange': onPlayerStateChange 24- } 25- }); 26- } 27-}
上記2番目の onYouTubeIframeAPIReady関数を削除して実行した場合、右にサムネイルが並んで表示されます。
サムネイルをクリックすれば、クリックした1つの動画しか再生されないはずです。（＝「複数の動画を同時再生できない状態」が達成されている）
投稿2021/09/14 11:52
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/15 13:35
退会済みユーザー
2021/09/15 13:41
2021/09/16 15:20