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

【问题标题】：HTML5 video - show div at certain video timeHTML5 视频 - 在特定视频时间显示 div
【发布时间】：2013-05-09 04:12:06
【问题描述】：

我试图在视频播放中的某个时间显示一个 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()
    }
});
});

【问题讨论】：

标签： jquery html html5-video

【解决方案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>

【讨论】：

为什么我不适合这个
可能是class="video-js vjs-default-skin"中的空间

【解决方案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()
    }
});

【讨论】：

【解决方案3】：

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

检查这可能有帮助

【讨论】：