HTML5 video - show div at certain video time

问题

I'm trying to show a div at a certain time in the video playback, but the code below is not working. Can someone please tell me what would be the correct way of doing this (not using popcorn...)?

$(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()
    }
});

Also tried this but no go...

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

回答1:

This works...

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

and

<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>

回答2:

try this now .. i think this might work ... just added a function

$(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()
    }
});

check this maybe help

来源：https://stackoverflow.com/questions/16454217/html5-video-show-div-at-certain-video-time

标签

jquery

html5

html5-video