YouTubeの制御ボタンについて、機能は実装できたのですが、関数を入れ子にすると動作せず、質問させて頂きます。
まず実装できた場合がこちらでして、
https://jsfiddle.net/8d3g6mc5/
ご覧のように「再生・停止」いずれも動画が制御できています。
今回はこれを3つの関数で囲みたいのですが、そうすると動作しなくなってしまう部分で躓いてしまいました。
つまり下記のJavaScriptにあるように、
// 制御ボタンの設定
の部分を、
// ★使いまわすために関数にしておく
と
// ★「見る」クリックで動画表示
と
// ★動画表示してから
で囲むと動作しなくなってしまうのです。
Javascript
1// ★使いまわすために関数にしておく 2function YoutubeCtr() { 3 4 // ★「見る」クリックで動画表示 5 $('.lazy-load-youtube').on('click', function() { 6 $('#target').html('<div class="media"> 7 <div class="container-youtube"> 8 <iframe src="//www.youtube.com/embed/ZVT_CNl0Wvc 9 ?autoplay=1&iv_load_policy=3&rel=0" 10 allowfullscreen="" 11 frameborder="0"> 12 </iframe> 13 </div> 14 </div>'); 15 16 // ★動画表示してから 17 setTimeout(function(){ 18 19 // 制御ボタンの設定 20 var player; 21 function onYouTubeIframeAPIReady() { 22 player = new YT.Player( 23 document.getElementsByClassName('container-youtube')[0], { 24 videoId: 'ZVT_CNl0Wvc', 25 }); 26 var clickElement = document.getElementById("play"); 27 clickElement.addEventListener("click", function(event) { 28 player.playVideo(); 29 },false); 30 var clickElement = document.getElementById("pause"); 31 clickElement.addEventListener("click", function(event) { 32 player.pauseVideo(); 33 },false); 34 } 35 function onPlayerReady(event) { 36 event.target.playVideo(); 37 } 38 39 },500); 40 41 }); 42} 43YoutubeCtr();
上記コードのように3つの関数を加えて動作しなくなったものがこちらです。
https://jsfiddle.net/8d3g6mc5/1/
これはYouTube APIについての問題というよりも、基本的なJavaScriptの入れ子構造について知識不足であると思うのですが、これだけ色々な入れ子になるとどう対処したらいいものか…、私ではまったく判断できません。
どうか有識者の皆さま、プロの視点からのアドバイスを頂戴できれば幸甚に存じます。
何卒宜しくお願い申し上げます。
回答2件
あなたの回答
tips
プレビュー