PHPとJavascriptを使って後述する仕様のページを作ろうとしているのですが、どうしてもうまくいかない部分があり、質問させて頂きます。
###使用言語とAPI
- HTML、CSS
- PHP
- JavaScript
- Youtube > IFrame Player API
###目指している仕様
- Youtube Player APIを使用して動画を複数埋め込む。
- サムネイル画像をクリックするとモーダルウィンドウが出現し、動画再生開始。
- 1つの動画につき、最初の一回の再生時に、10秒間の広告が流れる。
- 広告は5秒後にスキップ可能。
- モーダルウィンドウは「Close」ボタン、或はモーダルウィンドウの外側をクリックすると閉じ、動画も一時停止する。
- 閉じたモーダルウィンドウのサムネイル画像を再度クリックすると、モーダルウィンドウが再度開き、動画の続きが自動的に再生される(広告は流れない)。
###コード
現在、以下のようなコードを書きましたが、後述する問題点が発生し、解決できずにいます。
lang
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>Modal Window</title> 6 <link rel="stylesheet" href="styles.css"> 7</head> 8<body> 9 10<?php $youtube_id_list = array("vH_hAucdcQM", "g-FpDQ8Eqw8", "H2aW5V46khA"); ?> 11<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 12 13 14 15<?php foreach ($youtube_id_list as $key => $youtube_id): ?> 16<div> 17 18 <div id="open_<?php echo $key; ?>" class="open"><img src="http://i.ytimg.com/vi/<?php echo $youtube_id; ?>/sddefault.jpg" width="200px"></div> 19 <div id="mask_<?php echo $key; ?>" class="mask hidden"></div> 20 <div id="modal_<?php echo $key; ?>" class="mask hidden"> 21 <div id="sample_<?php echo $key; ?>"></div> 22 23 <!--広告スペース--> 24 <div id="ad_<?php echo $key; ?>" class="ad" style="display:none;"> 25 <div id="count-down_<?php echo $key; ?>" class="count-down"><span id="timer_<?php echo $key; ?>">05.00</span>秒後にスキップ可能</div> 26 <button id="skip_<?php echo $key; ?>" style="display:none;">広告をスキップ</button> 27 </div> 28 <div id="gaugeBack_<?php echo $key; ?>" class="gaugeBack" style="display:none"></div> 29 <div id="gauge_<?php echo $key; ?>" class="gauge" style="display:none"></div> 30 <!--/広告スペース--> 31 32 <div id="close_<?php echo $key; ?>" class="close">Close</div> 33 </div> 34</div> 35<?php endforeach; ?> 36 37 38 39<script> 40<?php foreach ($youtube_id_list as $key => $youtube_id): ?> 41(function() { 42 'use strict'; 43 44 var open = document.getElementById('open_<?php echo $key; ?>'); 45 var close = document.getElementById('close_<?php echo $key; ?>'); 46 var modal = document.getElementById('modal_<?php echo $key; ?>'); 47 var mask = document.getElementById('mask_<?php echo $key; ?>'); 48 49 open.addEventListener('click', function() { 50 modal.className = 'modal'; 51 mask.className = 'mask'; 52 }); 53 54 close.addEventListener('click', function() { 55 modal.className = 'modal hidden'; 56 mask.className = 'mask hidden'; 57 }); 58 59 mask.addEventListener('click', function() { 60 close.click(); 61 }); 62})(); 63<?php endforeach; ?> 64</script> 65 66 67<script> 68// IFrame Player API の読み込み 69var tag = document.createElement('script'); 70tag.src = "https://www.youtube.com/iframe_api"; 71var firstScriptTag = document.getElementsByTagName('script')[0]; 72firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 73 74// YouTube ID と埋め込むエリア 75var youtubeData = [ 76 <?php foreach ($youtube_id_list as $key => $youtube_id): ?> 77 { 78 youtubeIid: '<?php echo $youtube_id; ?>', 79 embedArea: 'sample_<?php echo $key; ?>' 80 } 81 <?php 82 if($youtube_id != end($youtube_id_list)) { 83 echo ","; 84 } 85 ?> 86 <?php endforeach; ?> 87]; 88 89// サムネイルの埋め込み 90function onYouTubeIframeAPIReady() { 91 for (var i = 0; i < youtubeData.length; i++) { 92 //document.getElementById(youtubeData[i]['embedArea']).innerHTML = '<img id="yt-thumb' + i + '" src="http://i.ytimg.com/vi/' + youtubeData[i]['youtubeIid'] + '/sddefault.jpg">'; 93 // 埋め込んだサムネイルにイベント追加 94 embedYoutube(i); 95 } 96} 97 98// YouTubeの埋め込みの準備 99var ytPlayer; 100function embedYoutube(num) { 101 102 var i = 0; 103 104 // サムネイルクリック 105 document.getElementById('open_' + num).addEventListener('click', function() { 106 107 if(i == 0) { 108 $("#ad_" + num).show(); 109 $("#gaugeBack_" + num).show(); 110 $( "#gauge_" + num ) . animate( { width: 'toggle',}, { duration: 10000, easing: 'swing', } ); 111 112 setTimeout(function() { 113 $("#count-down_" + num).hide(); 114 $("#skip_" + num).show(); 115 }, 5000); 116 117 // スキップボタンがクリックされた時の処理 118 $('#skip_' + num).click(function() { 119 $("#ad_" + num).hide(); 120 $("#gauge_" + num).hide(); 121 $("#gaugeBack_" + num).hide(); 122 clearTimeout(playVideoTimer); 123 124 ytPlayer = new YT.Player( 125 youtubeData[num]['embedArea'], // 埋め込む場所の指定 126 { 127 width: 640, // プレーヤーの幅 128 height: 390, // プレーヤーの高さ 129 videoId: youtubeData[num]['youtubeIid'], // YouTubeのID 130 events: { 131 'onReady': onPlayerReady, 132 'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行 133 } 134 } 135 ); 136 137 return; 138 }); 139 i++; 140 141 // 10秒後に動画再生 142 playVideoTimer = setTimeout(function(){ 143 144 $("#ad_" + num).hide(); 145 $("#gauge_" + num).hide(); 146 $("#gaugeBack_" + num).hide(); 147 148 ytPlayer = new YT.Player( 149 youtubeData[num]['embedArea'], // 埋め込む場所の指定 150 { 151 width: 640, // プレーヤーの幅 152 height: 390, // プレーヤーの高さ 153 videoId: youtubeData[num]['youtubeIid'], // YouTubeのID 154 events: { 155 'onReady': onPlayerReady, 156 'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行 157 } 158 } 159 ); 160 },10000); 161 } 162 163 164 else { 165 document.getElementById('open_' + num).addEventListener('click', function() { 166 $("#ad_" + num).hide(); 167 $("#gauge_" + num).hide(); 168 $("#gaugeBack_" + num).hide(); 169 170 ytPlayer = new YT.Player( 171 youtubeData[num]['embedArea'], // 埋め込む場所の指定 172 { 173 width: 640, // プレーヤーの幅 174 height: 390, // プレーヤーの高さ 175 videoId: youtubeData[num]['youtubeIid'], // YouTubeのID 176 events: { 177 'onReady': onPlayerReady, 178 'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行 179 } 180 } 181 ); 182 }); 183 } 184 185 186 187 document.getElementById('close_' + num).addEventListener('click', function() { 188 clearTimeout(playVideoTimer); 189 }); 190 191 document.getElementById('mask_' + num).addEventListener('click', function() { 192 document.getElementById('close_' + num).click(); 193 }); 194 195 }); 196} 197 198// プレーヤー読み込み後の処理 199function onPlayerReady(event) { 200 event.target.playVideo(); 201 202 <?php foreach ($youtube_id_list as $key => $youtube_id): ?> 203 document.getElementById('close_<?php echo $key; ?>').addEventListener('click', function() { 204 ytPlayer.pauseVideo(); 205 }); 206 207 document.getElementById('mask_<?php echo $key; ?>').addEventListener('click', function() { 208 document.getElementById('close_<?php echo $key; ?>').click(); 209 }); 210 <?php endforeach; ?> 211} 212 213 214// プレーヤーの状態が変更されたとき 215function onPlayerStateChange(event) { 216 // 現在のプレーヤーの状態を取得 217 var ytStatus = event.data; 218 // 再生終了したとき 219 if (ytStatus == YT.PlayerState.ENDED) { 220 console.log('再生終了'); 221 // 動画再生 222 event.target.playVideo(); 223 } 224 // 再生中のとき 225 if (ytStatus == YT.PlayerState.PLAYING) { 226 console.log('再生中'); 227 } 228 // 停止中のとき 229 if (ytStatus == YT.PlayerState.PAUSED) { 230 console.log('停止中'); 231 } 232 // バッファリング中のとき 233 if (ytStatus == YT.PlayerState.BUFFERING) { 234 console.log('バッファリング中'); 235 } 236 // 頭出し済みのとき 237 if (ytStatus == YT.PlayerState.CUED) { 238 console.log('頭出し済み'); 239 } 240} 241</script> 242 243 244</body> 245</html>
###問題点
- Closeボタン(或はモーダルウィンドウの外側)をクリックし、動画を一時停止にするプログラムが、2回目までは正常に作動するのですが、3回目以降はコンソールログに下記のエラーが発生し、正常に作動しない。
sample.php:425 Uncaught TypeError: ytPlayer.pauseVideo is not a function
at HTMLDivElement.<anonymous> (sample.php:425)
at HTMLDivElement.<anonymous> (sample.php:268)
-
広告を表示中にCloseボタン(或はモーダルウィンドウの外側)をクリックし、広告の表示時間(10秒以内)中に再度サムネイルをクリックしてモーダルウィンドウを出すと、広告終了後、動画の再生が始まらない。
-
コードの下記の部分を削除すると、上記のCloseボタンの問題は起きないのですが、広告が自動で消えてくれないのと、動画の再生が自動的に始まらない(該当コードを削除しているので当然ではありますが)。
lang
1else { 2 document.getElementById('open_' + num).addEventListener('click', function() { 3 $("#ad_" + num).hide(); 4 $("#gauge_" + num).hide(); 5 $("#gaugeBack_" + num).hide(); 6 7 ytPlayer = new YT.Player( 8 youtubeData[num]['embedArea'], // 埋め込む場所の指定 9 { 10 width: 640, // プレーヤーの幅 11 height: 390, // プレーヤーの高さ 12 videoId: youtubeData[num]['youtubeIid'], // YouTubeのID 13 events: { 14 'onReady': onPlayerReady, 15 'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行 16 } 17 } 18 ); 19 }); 20}
###補足
- Javascriptの中にPHPのコードが埋め込まれていたり、関数化すべきところができてなかったりといった、質問事項以外でのツッコミどころも多々あるかと思いますが、何分未熟者故に、ご容赦頂けましたら幸いです。勿論、そういった点のアドバイスも頂ける場合も、私としましては大歓迎です。
- Closeボタンを押してモーダルウィンドウを閉じて動画を一時停止した後、再度モーダルウィンドウを出した際に、自動で動画が再生されるようにしたいのですが、上記の問題が発生したため、この部分は未実装状態となっています。いずれ実装する予定です。
###参考にしたサイト
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。