JS：同じビデオで異なる時刻に複数のdivを表示するtimeupdate、getElementbyIdの問題？

Question

これは基本的にここで私がやろうとしていることです：ビデオが再生され、タイムスタンプを押すと、divがクリック可能なボタンでビデオにポップアップします。

これは一度実行すると動作しますが、別の時間に別のdivで再度呼び出された場合は機能しません。

この例では、最初のボタンは5〜10秒で表示されますが、11〜15秒で表示される2番目のdivは機能しません。

JAVASCRIPT：

var growVideo=document.getElementById("videogrow"); 
var growLearnButton = document.getElementById("growLearn"); 
var growLearnCloseButton = document.getElementById("growLearnClose"); 
var growDoButton = document.getElementById("growDo"); 
var growDoCloseButton = document.getElementById("growDoClose"); 


//GrowLearnMoreGuide 

// Event listener for the guide buttons 
    growLearnButton.addEventListener("click", function() { 
if (growVideo.paused == true) { 
    // Play the video 
    growVideo.play(); 

    // Update the button text to 'Pause' 
    growLearnButton.innerHTML = "Grow: Learn More"; 
} else { 
    // Pause the video 
    growVideo.pause(); 

    // Update the button text to 'Play' 
    growLearnButton.innerHTML = "Grow: Learn More"; 
} 
}); 

// Event listener for the close buttons 
growLearnCloseButton.addEventListener("click", function() { 
if (growVideo.paused == true) { 
    // Play the video 
    growVideo.play(); 

    // Update the button text to 'Pause' 
    growLearnCloseButton.innerHTML = "X Back to Grow"; 
} else { 
    // Pause the video 
    growVideo.pause(); 

    // Update the button text to 'Play' 
    growLearnCloseButton.innerHTML = "X Back to Grow"; 
} 
}); 



    var GrowDoMore = document.getElementById("GrowDoMore"); 
    var GrowDoMorestart = GrowDoMore.getAttribute('data-starttime'); 
    var GrowDoMoreend = GrowDoMore.getAttribute('data-endtime'); 


    videogrow.ontimeupdate = function(e) 

     { 
     var hasHidden = GrowDoMore.hasAttribute("hidden"); 
     if (growVideo.currentTime > GrowDoMorestart && growVideo.currentTime < GrowDoMoreend) 
      { 
      if (hasHidden) { 
       GrowDoMore.removeAttribute("hidden"); 
      } 
      } 
      else 
      { 
       if (!hasHidden) { 
       GrowDoMore.setAttribute("hidden", ""); 
       } 
      } 
      } 

var GrowLearnMore = document.getElementById("GrowLearnMore"); 
    var GrowLearnMorestart = GrowLearnMore.getAttribute('data-starttime'); 
    var GrowLearnMoreend = GrowLearnMore.getAttribute('data-endtime'); 

videogrow.ontimeupdate = function(e) 

{ 
var hasHidden = GrowLearnMore.hasAttribute("hidden"); 
    if (growVideo.currentTime > GrowLearnMorestart && growVideo.currentTime < GrowLearnMoreend) 
{ 
    if (hasHidden) { 
GrowLearnMore.removeAttribute("hidden"); 
    } 
} 
else 
{ 
    if (!hasHidden) { 
    GrowLearnMore.setAttribute("hidden", ""); 
    } 
} 
} 

    //GrowDoMoreGuide 



    // Event listener for the guide buttons 
     growDoButton.addEventListener("click", function() { 
     if (growVideo.paused == true) { 
      // Play the video 
      growVideo.play(); 

      // Update the button text to 'Pause' 
      growDoButton.innerHTML = "Grow: Do More"; 
     } else { 
      // Pause the video 
      growVideo.pause(); 

      // Update the button text to 'Play' 
      growDoButton.innerHTML = "Grow: Do More"; 
     } 
     }); 

     // Event listener for the close buttons 
     growDoCloseButton.addEventListener("click", function() { 
     if (growVideo.paused == true) { 
      // Play the video 
      growVideo.play(); 

      // Update the button text to 'Pause' 
      growDoCloseButton.innerHTML = "X Back to Part 1: Grow"; 
     } else { 
      // Pause the video 
      growVideo.pause(); 

      // Update the button text to 'Play' 
      growDoCloseButton.innerHTML = "X Back to Part 1: Grow"; 
     } 
     }); 

HTML：

<video id="videogrow" controls> 
       <!-- Video files --> 
       <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4"> 
       <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm"> 

       <!-- Text track file --> 
       <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default> 

       <!-- Fallback for browsers that don't support the <video> element --> 
       <a href="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a> 
      </video> 

      <!-- LEARN MORE--> 

       <div id="GrowLearnMore" hidden data-starttime="5" data-endtime="10"> 
       <button type="button" class="GrowLearnGuide" data-toggle="modal" data-target="#GrowLearnModal" id="growLearn">Grow: Learn More</button> 
       </div> 

      <!-- Modal --> 
       <div class="modal fade" id="GrowLearnModal" tabindex="-1" role="dialog" aria-labelledby="Grow: Learn More"> 
       <div class="modal-dialog" role="document"> 
        <!-- <div class="modal-content">--> 
        <a href="http://www.nascireland.org/" target="blank"><img src="http://fareireland.ie/imgs/tobleroneframe.jpg" class="center" /></a><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
        <div class="closeButton1"><button type="button" class="GrowLearnGuide btn growLearn" data-dismiss="modal" id="growLearnClose">Back to Documentary X</button></div> 
       </div><!--</modal>--> 
       </div><!--</modal>--> 
      <!-- END LEARN MORE--> 

      <!-- DO MORE--> 
      <div id="GrowDoMore" hidden data-starttime="11" data-endtime="15"> 
       <button type="button" class="GrowDoGuide" data-toggle="modal" data-target="#GrowDoModal" id="growDo">Grow: Do More</button> 
      </div> 
      <!-- Modal --> 
       <div class="modal fade" id="GrowDoModal" tabindex="-1" role="dialog" aria-labelledby="Grow: Do More"> 
        <div class="modal-dialog" role="document"> 
        <!-- <div class="modal-content">--> 
        <a href="http://www.nascireland.org/" target="blank"><img src="imgs/doMore.png" width ="50%" class="center" /></a><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
        <div class="closeButton2"><button type="button" id="growDoClose" class="GrowDoGuide btn growDo" data-dismiss="modal" >Back to Documentary X</button></div> 
        </div><!--</modal>--> 
       </div><!--</modal>--> 
       <!-- END DO MORE--> 

ここではjsfiddleです：https://jsfiddle.net/m615t5LL/6/

私は、これはそれがあるvideogrowを呼び出している事実とは何かかもしれないと思いますIDは二度しかないが、私はそれを修正する方法を知らない。

私はJSのクラスに変更しようとしましたが、htmlなどでビデオを2回呼び出すようにしました。

<div class="videogrow videogrow2"> 

本当にありがとうございます！

Answer 1

いくつかのエラーがあります。

1. growVideo突然コードをvideogrow途中となります。

2. element.onxxx = handler;の構文では、ハンドブックをに添付できます。同じ構文を使用する2番目の添付ファイルは、最初の添付ファイルを消去します。 element.addEventListener("eventName", handler)またはjQueryの$(selector).on('eventName', handler)と対照的に、複数のハンドラを同じ要素にアタッチすることができます。実際に

簡単な修正が同じイベントハンドラの両方の表示/非表示の操作を行うことですので、添付ファイルの事はここでは、実際には大きな問題ではありません。

簡潔なコードを維持するためのjQueryを利用して、私はこのような何か書くでしょう：

var growVideo = $("#videogrow").get(0); // element 
var $growDoMore = $("#GrowDoMore"); // jQuery object 
var $growLearnMore = $("#GrowLearnMore"); // jQuery object 

//GrowLearnMoreGuide 
// Event listener for the guide buttons 
$("#growLearn").on('click', function() { 
    if (growVideo.paused == true) { 
     growVideo.play(); // Play the video 
     $(this).text("Grow: Learn More"); // Update the button text to 'Pause' 
    } else { 
     growVideo.pause(); // Pause the video 
     $(this).text("Grow: Learn More"); // Update the button text to 'Play' 
    } 
}); 

// Event listener for the close buttons 
$("#growLearnClose").on('click', function() { 
    if (growVideo.paused == true) { 
     growVideo.play(); // Play the video 
     $(this).text("X Back to Grow"); // Update the button text to 'Pause' 
    } else { 
     growVideo.pause(); // Pause the video 
     $(this).text("X Back to Grow"); // Update the button text to 'Play' 
    } 
}); 

$(growVideo).on('timeupdate', function(e) { 
    // show/hide growDoMore 
    if (this.currentTime > $growDoMore.data('starttime') && this.currentTime < $growDoMore.data('endtime')) { 
     $growDoMore.show(); 
    } else { 
     $growDoMore.hide(); 
    } 
    // show/hide growLearnMore 
    if (this.currentTime > $growLearnMore.data('starttime') && this.currentTime < $growLearnMore.data('endtime')) { 
     $growLearnMore.show(); 
    } else { 
     $growLearnMore.hide(); 
    } 
}); 

// GrowDoMoreGuide 
// Event listener for the guide buttons 
$("#growDo").on('click', function() { 
    if (growVideo.paused) { 
     growVideo.play(); // Play the video 
     $(this).text("Grow: Do More"); // Update the button text to 'Pause' 
    } else { 
     growVideo.pause(); // Pause the video 
     $(this).text("Grow: Do More"); // Update the button text to 'Play' 
    } 
}); 

// Event listener for the close buttons 
$("#growDoClose").on('click', function() { 
    if (growVideo.paused) { 
     growVideo.play(); // Play the video 
     growDoCloseButton.innerHTML = "X Back to Part 1: Grow"; // Update the button text to 'Pause' 
    } else { 
     growVideo.pause(); // Pause the video 
     growDoCloseButton.innerHTML = "X Back to Part 1: Grow"; // Update the button text to 'Play' 
    } 
});