YouTubeAPIで動画の制御をしています。
質問内容はAPIというよりも**[i]による対象の指示方法**になると思うので、APIについてご存知ない方でも、JavaScriptの処理に慣れた方でしたらご意見頂戴できれば幸いでございます。
本題として、【機能】と【問題】を整理します。
【機能】としては、
サムネイルクリックで、➀動画再生と制御ボタン表示がされ、➁再生中は他の動画が停止する。というものなのですが、
【問題】があり、
2回目のサムネイルクリックに限って➁が効かない(1回目の動画が停止しない)。という状態です。
実際のサンプルがこちらです。
https://jsfiddle.net/38r9tmzo/
ご覧のように、サムネイルを2回連続でクリックしたときに、1回目の動画が停止せず、しかし3回以上連続でクリックした場合であれば他の動画が停止いたします。
以下にサンプルのHTMLとjavaScriptを掲載いたします。
html
1<div id="contents"> 2 <div id="ytButton"></div> 3 <div class="ytBox"> 4 <div id="sample1"></div> 5 </div> 6 <div class="ytBox"> 7 <div id="sample2"></div> 8 </div> 9 <div class="ytBox"> 10 <div id="sample3"></div> 11 </div> 12</div>
javascript
1//YouTube 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 = []; 9var ytPlaying, ytStop, ytPlay; 10 11// プレーヤーのサイズ 12var ytWidth = 200; 13var ytHeight = 130; 14 15// 各動画情報 16var ytData = [ 17 { 18 id: 'rJYQ5jWHSeM', 19 area: 'sample1' 20 }, { 21 id: 'q7JEUetg8lE', 22 area: 'sample2' 23 }, { 24 id: 'nNuHVKNWYSE', 25 area: 'sample3' 26 } 27]; 28 29// サムネイルの埋め込み 30function onYouTubeIframeAPIReady() { 31 for(var i = 0; i < ytData.length; i++) { 32 // サムネイルの埋め込み 33 document.getElementById(ytData[i]['area']).innerHTML = '<img id="yt-thumb' + i + '" src="http://i.ytimg.com/vi/' + ytData[i]['id'] + '/sddefault.jpg">'; 34 // 埋め込んだサムネイルにイベント追加 35 ytEmbedding(i); 36 } 37} 38 39// サムネイルクリック時のアクション 40function ytEmbedding(i) { 41 document.getElementById('yt-thumb' + i).addEventListener('click', function() { 42 // プレーヤーの埋め込み 43 ytPlayer[i] = new YT.Player(ytData[i]['area'], { 44 width: ytWidth, 45 height: ytHeight, 46 videoId: ytData[i]['id'], 47 playerVars: { 48 rel: 0 49 }, 50 events: { 51 'onStateChange': onPlayerStateChange, 52 'onReady': onPlayerReady 53 } 54 }); 55 // 制御ボタンの表示 56 $('#ytButton').html('<button id="play">play</button><button id="pause">pause</button>'); 57 var ytPlay = document.getElementById('play'); 58 ytPlay.addEventListener('click', function() { 59 ytPlayer[i].playVideo(); 60 }); 61 var ytPause = document.getElementById('pause'); 62 ytPause.addEventListener('click', function() { 63 ytPlayer[i].pauseVideo(); 64 }); 65 }); 66} 67 68// プレーヤー読み込み後の処理 69function onPlayerReady(e) { 70 e.target.playVideo(); 71 72} 73 74// プレーヤーの状態に変化があった時に実行 75function onPlayerStateChange(event) { 76 // 各プレーヤーの状態を確認 77 for(var i = 0; i < ytData.length; i++) { 78 var thisState = ytPlayer[i].getPlayerState(); 79 if( thisState == 1 && ytPlaying == undefined) { 80 ytPlaying = i; 81 } else if(thisState == 1 && ytPlaying != i) { 82 ytStop = ytPlaying; 83 ytPlay = i; 84 } else { 85 } 86 } 87 // 同時再生があった場合、元々再生していた方を停止する 88 if(ytStop != undefined) { 89 ytPlayer[ytStop].pauseVideo(); 90 ytStop = undefined; 91 } 92 // 現在再生中のプレーヤー番号を保存しておく 93 if(ytPlay != undefined) { 94 ytPlaying = ytPlay; 95 ytPlay = undefined; 96 } 97 // 制御ボタンを書き換えて、現在再生中のプレーヤーを制御対象にする 98 $('#ytButton').html('<button id="play2">play</button><button id="pause2">pause</button>'); 99 var ytPlay2 = document.getElementById('play2'); 100 ytPlay2.addEventListener('click', function() { 101 ytPlayer[ytPlaying].playVideo(); 102 }); 103 var ytPause2 = document.getElementById('pause2'); 104 ytPause2.addEventListener('click', function() { 105 ytPlayer[ytPlaying].pauseVideo(); 106 }); 107} 108 109
上のfunction xxxx
は全てYouYubeAPIによる関数ですが、おそらくこれらの使い方については間違いはなく、先述の【問題】は**[i]による対象の指示方法**が間違っているのだと考えております。が…、不馴れなため複雑になると間違いの箇所が抽出できません。
お詳しい方、どうぞご意見宜しくお願い申し上げます。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/17 08:42 編集
2018/09/17 08:45