htmlのシンプルなサイトを制作しています。
以下のようなフローのしくみを作りたいのですが、javascript初心者のため、煮詰まっております。
助言を頂ければ幸いです。
- サイト訪問時に、動画を読み込んだポップアップ(video1)が自動で表示される
- 動画の再生終了時に、ポップアップが自動で閉じる
- 同一のページにポップアップ(video2)が出現するボタンがあり、こちらはクリックして開く
上記の条件は達成したのですが、気になる挙動があり修正したく考えています。
問題
video1の動画終了前に手動でポップアップを閉じ、すぐにvideo2を開くと、video1の動画再生終了時間のタイミングで閉じてしまう。
希望する動き
video1のポップアップが、
●動画再生終了時に自動で閉じる
●ポップアップを手動で閉じた時、video.addEventListenerの内容がキャンセルされる
コード
html
1<div class="popup"> 2 <div class="popup_in" style="display:none"> 3 <a href="#inline_content1" class="inline1 colorbox"></a> 4 </div> 5 <div class="popup_in"> 6 <a href="#inline_content2" class="inline2 colorbox">動画を再生する</a> 7 </div> 8</div> 9<!--Inline Contents Start--> 10<div style="display:none"> 11 <div id="inline_content1" style="background:#000;"> 12 <video id="video1" autoplay playsinline muted controls> 13 <source src="assets/movie/movie01.mp4"> 14 <source src="assets/movie/movie01.ogv"> 15 <source src="assets/movie/movie01.webm"> 16 </video> 17 </div> 18</div> 19<div style="display:none"> 20 <div id="inline_content2" style="background:#000;"> 21 <video id="video2" autoplay playsinline muted controls> 22 <source src="assets/movie/movie02.mp4"> 23 <source src="assets/movie/movie02.ogv"> 24 <source src="assets/movie/movie02.webm"> 25 </video> 26 </div> 27</div> 28<!--Inline Contents End-->
js
1<script> 2$(document).ready(function(){ 3 $(".inline1").colorbox({ 4 inline: true, 5 open:true, 6 width:"98%", 7 rel:'group', 8 closeButton:'true', 9 onComplete: function(){ 10 var video = $("#video1").get(0); 11 video.play(); //動画の再生 12 //動画が終了した時の処理 13 video.addEventListener('ended',function() { 14 $("#video1").remove(); 15 $("#cboxOverlay").remove(); 16 parent.$.colorbox.close(); 17 }); 18 }, 19 onClosed: function(){ 20 video.currentTime = 0; 21 } 22 }); 23}); 24</script> 25<script> 26$(document).ready(function(){ 27 $('.inline2').on('click', function(){ 28 $(".inline2").colorbox({ 29 inline: true, 30 width:"98%", 31 rel:'group', 32 closeButton:'true', 33 onComplete: function(){ 34 var video = $("#video2").get(0); 35 video.currentTime = 0; 36 video.play(); //動画の再生 37 }, 38 onCleanup: function(){ 39 var video = $("#video2").get(0); 40 video.currentTime = 0; 41 } 42 }); 43 }); 44}); 45</script>
この問題を解決する方法をご存知でしたら、ご教示いただけますと幸いです。
どうぞ、宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。