Question

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

当它运行一次但是如果在另一次使用单独的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的事实有关，但我不知道如何解决它。

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

<div class="videogrow videogrow2">

非常感谢您的帮助！

Answer 1

有几个错误。

growVideo突然变为代码的videogrow部分。
语法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'
    }
});

JS：timeupdate在同一视频，getElementbyId问题的不同时间取消隐藏多个div？

1 个答案: