jquery - HTML5 视频 - 在特定视频时间显示 div

Question

我试图在视频播放中的某个时间显示一个 div，但下面的代码不起作用。有人可以告诉我这样做的正确方法是什么（不使用爆米花......）？

$(document).ready(function() {
    $("#element_1").hide();

    var v1 = document.getElementsByTagName('video')[0];

    v1.addEventListener("timeupdate", function() {
    videoTime = v1.currentTime;
    });

    if(videoTime == 10){
        $("#element_1").show()
    }
});

也试过这个，但没有去......

$(document).ready(function() {
    $("#element_1").hide(); 
document.getElementsByTagName('video').addEventListener("timeupdate", function() {
    if(this.currentTime > 10 * 60) {
$("#element_1").show()
    }
});
});

Answer 1

这有效...

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

和

<video id="v1" width="320" height="240" controls>
  <source src="needles.mp4" type="video/mp4">
  <source src="needles.ogg" type="video/ogg">
</video> 
<div id="element_1">Element 1</div>

Answer 2

现在试试这个..我认为这可能有效......刚刚添加了一个功能

$(document).ready(function() {
    $("#element_1").hide();

    var v1 = document.getElementsByTagName('video')[0];

    v1.addEventListener("timeupdate", function() {
    videoTime = v1.currentTime;
    show_div(videoTime) 
    });

    function show_div(videoTime)
    { 
    if(videoTime == 10){
        $("#element_1").show()
    }
});

Answer 3

var myVideo = videojs('v1');
myVideo.on('timeupdate', function(show){
    console.log(myVideo.currentTime());
    if(myVideo.currentTime() > 41) {
        $("#element_1").show()
    }
});

检查这可能有帮助