在某个视频时间显示Div，然后将其隐藏在另一个视频时

Question

我正在尝试在某个视频时间显示DIV，并在2秒后消失，所以我尝试了此操作，但它不起作用：

$(document).ready(function() {
 $("#element_1").hide(); 
 document.getElementById('bgvid').addEventListener("timeupdate", 
 function() {
 if(this.currentTime > 5) {
$("#element_1").show();
    }
    else if(this.currentTime > 7) {
        $("#element_1").hide();
    } 
});
});

它仅在视频启动后仅5秒钟显示DIV，但并未将其隐藏在7中。

Answer 1

我得到了它的工作，我需要它：

$(document).ready(function() {
    $("#element_1").hide(); 
document.getElementById('bgvid').addEventListener("timeupdate", 
function() {
    if(this.currentTime > 5 && this.currentTime < 10) {
$("#element_1").show();
    }
    else {
        $("#element_1").hide();
    }
});
});

Answer 2

而不是去JQ，您可以使用普通JS本身实现

https://codepen.io/subbu1191/pen/qvjknq

var vid = document.getElementById("myVideo");
vid.ontimeupdate = function() {myFunction()};
function myFunction() {
  document.getElementById("demo").innerHTML = vid.currentTime;
     if((vid.currentTime >= 5) && (vid.currentTime <= 7)){
      document.getElementById('headerContent').style.display = 'block';
     }else{
      document.getElementById('headerContent').style.display = 'none';
     }
 }