質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

YouTube API

YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

受付中

【YouTube動画】サムネイルクリックで切り替える & 複数設置同時再生をさせないようにしたい

akiokasan
akiokasan

総合スコア1

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

YouTube API

YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

0クリップ

483閲覧

投稿2021/09/14 05:19

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; }); });

色々と模索してやってみたのですが上手くいきません.....何卒ご教授よろしくお願いいたします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

YouTube API

YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。