javascript - JS : timeupdate unhide multiple divs at different times on same video, getElementbyId 问题？

Question

所以基本上这就是我正在尝试做的事情:当视频播放并达到时间戳时，视频上会弹出一个带有可点击按钮的 div。

这在运行一次时有效，但如果在另一时间用单独的 div 再次调用它，它将无效。

在示例中，第一个按钮显示 5-10 秒，但第二个 div 将显示 11-15 秒不起作用。

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/

我认为这可能与它两次调用作为 ID 的 videogrow 这一事实有关，但我不知道如何修复它。

我尝试将其更改为 JS 中的类，并在 html 中调用视频两次，例如。

<div class="videogrow videogrow2">

非常感谢您的帮助!

Answer 1

有几个错误。

1. growVideo 突然变成 videogrow 通过代码的一部分。

2. element.onxxx = handler; 语法允许您附加一个 处理程序。使用相同语法的第二个附件将删除第一个附件。将其与 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'
    }
});