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 usi

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

Solution 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) 
    });

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

Solution 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