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

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

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

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

YouTube

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

YouTube API

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2808閲覧

カルーセルスライダーのサムネイルをクリックして、メインの動画を変更

arisaan

総合スコア24

HTML5

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

YouTube

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

YouTube API

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/06/29 12:46

youtubeのカルーセルサムネイル付き、動画再生のようなことがしたい。

◼︎YouTube動画をサムネイルクリックで切り替える

◼︎Youtube IFrame Player APIを利用してサムネイル画像クリックで動画再生
↑のリンクのサムネイルがスライドカルーセルになっているようなことがしたいです。
どうすればいいのか、全くわからないので、ヒントだけでもいただけると幸いです。

▼完成イメージ
イメージ説明

一応、自分でも色々考えて「slick」を用いて表現できないかと思ったのですが、
イメージしているものではなく、詰まってしまっている状態です。

問題点としては、以下のことが挙げられます。

・slickだと、メイン部分と連動しているので、サムネイル部分をスライドさせるとメインの部分もスライドしてしまう。
・また、スライドさせたあともメイン動画の部分が変わっても、動画が再生され続けてしまう。
(スライドしてメイン動画が変わったら、再生されていた動画は止まってほしい)

理想としては、
◼︎YouTube動画をサムネイルクリックで切り替える
◼︎Youtube IFrame Player APIを利用してサムネイル画像クリックで動画再生
上記2つのサムネイルがカルーセルになっているver.です。

お手数ですが、お力添え願えないでしょうか。
すいませんが、よろしくお願いいたします。

下記、コードは「slick」を用いて表現できないかと、模索したコードです。
参考にはならないかもですが、よろしくおねがいします。

html

1<ul class="slider"> 2 <li id="wrap_movie01"></li> 3 <li id="wrap_movie02"></li> 4 <li id="wrap_movie03"></li> 5 <li id="wrap_movie04"></li> 6 <li id="wrap_movie05"></li> 7 <li id="wrap_movie06"></li> 8 <li id="wrap_movie07"></li> 9 <li id="wrap_movie08"></li> 10 <li id="wrap_movie09"></li> 11</ul> 12<ul class="slider-nav"> 13 <li><img src="http://img.youtube.com/vi/GcfINC1TZv0/mqdefault.jpg" /></li> 14 <li><img src="http://img.youtube.com/vi/sQlu57kj_90/mqdefault.jpg" /></li> 15 <li><img src="http://img.youtube.com/vi/LdFbjQjr_Sg/mqdefault.jpg" /></li> 16 <li><img src="http://img.youtube.com/vi/r8GuIF9f_HM/mqdefault.jpg" /></li> 17 <li><img src="http://img.youtube.com/vi/fWytAH6NteI/mqdefault.jpg" /></li> 18 <li><img src="http://img.youtube.com/vi/impSuIygMiQ/mqdefault.jpg" /></li> 19 <li><img src="http://img.youtube.com/vi/NyUTYwZe_l4/mqdefault.jpg" /></li> 20 <li><img src="http://img.youtube.com/vi/j1hft9Wjq9U/mqdefault.jpg" /></li> 21 <li><img src="http://img.youtube.com/vi/fWytAH6NteI/mqdefault.jpg" /></li> 22</ul> 23

▼slick用のjs

js

1<script> 2$(function(){ 3 var mainSlider = ".slider"; //メインスライダーid 4 var thumbnailSlider = ".slider-nav"; //サムネイルスライダーid 5 6 $(mainSlider).slick({ 7 // autoplay: true, 8 speed: 1000, 9 arrows: false, 10 asNavFor: thumbnailSlider 11 }); 12 $(thumbnailSlider).slick({ 13 slidesToShow: 3, 14 speed: 1000, 15 asNavFor: mainSlider 16 }); 17 //#thumbnail_sliderでクリックしたスライドをカレントにする 18 $(thumbnailSlider+" .slick-slide").on('click',function(){ 19 var index = $(this).attr("data-slick-index"); 20 $(thumbnailSlider).slick("slickGoTo",index,false); 21 }); 22}); 23</script> 24

▼youtube APIなどの動画系の設定js

js

1//IFrame Player API の読み込み 2var tag = document.createElement('script'); 3tag.src = "https://www.youtube.com/iframe_api"; 4var firstScriptTag = document.getElementsByTagName('script')[0]; 5firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 6 7// プレーヤーを配列宣言します 8var ytPlayer = []; 9// 各動画のIDと要素のIDを格納します。 10var ytData = [ 11 { 12 id: 'GcfINC1TZv0', 13 div_id: 'wrap_movie01' 14 }, { 15 id: 'sQlu57kj_90', 16 div_id: 'wrap_movie02' 17 }, { 18 id: 'LdFbjQjr_Sg', 19 div_id: 'wrap_movie03' 20 }, { 21 id: 'r8GuIF9f_HM', 22 div_id: 'wrap_movie04' 23 }, { 24 id: 'fWytAH6NteI', 25 div_id: 'wrap_movie05' 26 }, { 27 id: 'impSuIygMiQ', 28 div_id: 'wrap_movie06' 29 }, { 30 id: 'NyUTYwZe_l4', 31 div_id: 'wrap_movie07' 32 }, { 33 id: 'j1hft9Wjq9U', 34 div_id: 'wrap_movie08' 35 }, { 36 id: '9ZG9G3v1RPk', 37 div_id: 'wrap_movie09' 38 } 39]; 40 41// 各プレーヤーの埋め込み 42function onYouTubeIframeAPIReady() { 43 for(var i = 0; i < ytData.length; i++) { 44 ytPlayer[i] = new YT.Player(ytData[i]['div_id'], { 45 videoId: ytData[i]['id'], 46 playerVars: { 47 rel: 0, 48 showinfo: 0, 49 // autoplay:1, 50 controls:0, 51 loop:1, 52 playlist:ytData[i]['id'],//★loopする場合はplaylistを設定する必要がある 53 playsinline: 1//←★スマホ対応 54 }, 55 events: { 56 'onReady': onPlayerReady 57 } 58 }); 59 } 60} 61 62// 各プレーヤー準備完了後の処理 63function onPlayerReady(e) { 64 for (var i = 0; i < ytData.length; i++) { 65 if(e.target.getIframe().id == ytData[i]['div_id']) { 66 console.log(ytData[i]['div_id'] + 'のプレーヤー準備完了しました。'); 67 } 68 }; 69 // e.target.mute();//★autoplayする場合はミュートする必要がある 70 e.target.playVideo(); 71} 72

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

slickの想定で組んでみました。
動画の再生部分はスライダーでなく、中の動画を切り替えるだけにしています。

html

1<div id="player"> 2</div> 3 4<ul class="slider-nav"> 5</ul> 6 7<script> 8$(function(){ 9 10 var $thumbnailSlider = $(".slider-nav"); //サムネイルスライダーid 11 var ytPlayer; 12 var ytData = [ 13 {id: 'GcfINC1TZv0'}, 14 {id: 'sQlu57kj_90'}, 15 {id: 'LdFbjQjr_Sg'}, 16 {id: 'r8GuIF9f_HM'}, 17 {id: 'fWytAH6NteI'}, 18 {id: 'impSuIygMiQ'}, 19 {id: 'NyUTYwZe_l4'}, 20 {id: 'j1hft9Wjq9U'}, 21 {id: '9ZG9G3v1RPk'}, 22 ]; 23 24 //データからスライダーにサムネイルを追加 25 ytData.forEach(function(data){ 26 $thumbnailSlider.append('<li><img src="http://img.youtube.com/vi/'+data.id+'/mqdefault.jpg" /></li>'); 27 }); 28 29 $thumbnailSlider.slick({ 30 slidesToShow: 3, 31 speed: 1000, 32 }); 33 34 //#thumbnail_sliderでクリックしたスライドをカレントにする 35 $thumbnailSlider.on('click', '.slick-slide',function(){ 36 var index = $(this).attr("data-slick-index"); 37 $thumbnailSlider.slick("slickGoTo",index,false); 38 ytPlayer.loadVideoById({videoId: ytData[index].id});//動画切り替え 39 }); 40 41 42 // プレーヤーの埋め込み 43 window.onYouTubeIframeAPIReady = function() { 44 let i = 0; 45 ytPlayer = new YT.Player('player', { 46 videoId: ytData[i]['id'], 47 playerVars: { 48 rel: 0, 49 showinfo: 0, 50 // autoplay:1, 51 controls:0, 52 loop:1, 53 playlist:ytData[i]['id'],//★loopする場合はplaylistを設定する必要がある 54 playsinline: 1//★スマホ対応 55 }, 56 events: { 57 'onReady': onPlayerReady 58 } 59 }); 60 } 61 62 63 // プレーヤー準備完了後の処理 64 function onPlayerReady(e) { 65 e.target.playVideo(); 66 } 67 68 69 //IFrame Player API の読み込み 70 var tag = document.createElement('script'); 71 tag.src = "https://www.youtube.com/iframe_api"; 72 var firstScriptTag = document.getElementsByTagName('script')[0]; 73 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 74}); 75 76</script>

投稿2021/08/02 06:23

webgoto

総合スコア1293

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問