お世話になっております。
YoutubeAPIの利用方法についてお尋ね致します。
複数動画を制御しようと試みる過程で、「動画再生中に、他の動画を停止する」という機能の実装で躓いております。
後述するコードでは、
・再生済動画のytID
(YouTubeの動画ID)と
・再生済動画のytArea
(動画を埋め込む場所のID)
を保存し、他の動画の再生中に保存したものを停止する。という処理を考えているのですが、思うようにいかず、質問させて頂きました。
###サンプル
https://jsfiddle.net/9qokwpxc/
###コード
html
1<div id="youtube_ZVT_CNl0Wvc" class="videos_youtube"> 2<img src="http://i.ytimg.com/vi/ZVT_CNl0Wvc/mqdefault.jpg"> 3</div> 4 5<div id="youtube__sj2-dk7djI" class="videos_youtube"> 6<img src="http://i.ytimg.com/vi/_sj2-dk7djI/mqdefault.jpg"> 7</div> 8 9<button id="play">play</button> 10<button id="pause">pause</button> 11
javascript
1// YouTube 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(function($){ 8 9 // 再生済動画を入れるための配列 10 var PlayHistoryId = []; 11 var PlayHistoryArea = []; 12 13 // サムネイルをクリック後にYouTubeを埋め込む 14 $('body').on("click",".videos_youtube",function(){ 15 16 var click_Id = $(this).attr('id'); 17 var target_Id = document.getElementById(click_Id); 18 var click_VideoId = $(this).attr('id').replace('youtube_',''); 19 20 target_Id.addEventListener('click', function() { 21 22 // プレーヤーを埋め込む場所 23 var ytArea = target_Id; 24 // プレーヤーを埋め込むYouTubeID 25 var ytID = click_VideoId; 26 27 // YouTubeを埋め込む 28 ytPlayer = new YT.Player(ytArea, { 29 width: 320, 30 height: 195, 31 videoId: ytID 32 }); 33 34 // 再生した動画を「ytPlayer2やytPlayer3」など再生済動画として追加し続ける 35 ytPlayer2 = new YT.Player(PlayHistoryArea[1], { 36 videoId: PlayHistoryId[1] 37 }); 38 ytPlayer3 = new YT.Player(PlayHistoryArea[2], { 39 videoId: PlayHistoryId[2] 40 }); 41 42 // 再生したら再生済動画として配列に保存 43 PlayHistoryId.push(ytID); 44 PlayHistoryArea.push(ytArea); 45 46 }, false); 47 48 49 // ボタン制御 50 $('#play').click(function() { 51 // 再生 52 ytPlayer.playVideo(); 53 // 最後に再生したやつ以外を停止→うまくいかない 54 ytPlayer2.pauseVideo(); 55 ytPlayer3.pauseVideo(); 56 }); 57 $('#pause').click(function() { 58 // 停止 59 ytPlayer.pauseVideo(); 60 }); 61 62 }); 63 64})(jQuery); 65
上のサンプルやコードにありますように、 // 最後に再生したやつ以外を停止→うまくいかない
という点が躓いている部分でございます。
あまりお詳しい方はいらっしゃらないかと存じますが、もしAPIを触ったご経験がございましたらアドバイスをお待ちしております。
宜しくお願い申し上げます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/16 22:54