1

So I'm trying to get a current timestamp as in something with HH:MM:SS from an HTML5 video. I'm using a variation of this:
HTML

<video
    id="video-active"
    class="video-active"
    width="640"
    height="390"
    controls="controls">
    <source src="myvideo.mp4" type="video/mp4">
</video>
<div id="current">0:00</div>
<div id="duration">0:00</div>

JQUERY

$(document).ready(function(){
    $("#video-active").on(
    "timeupdate", 
    function(event){
    onTrackedVideoFrame(this.currentTime, this.duration);
});

function onTrackedVideoFrame(currentTime, duration){
    $("#current").text(currentTime);
    $("#duration").text(duration);
}

My main problem is that the current and duration divs are just showing the 0:00 and nothing else. Is there something wrong with the code, or is there an easier way to get the timestamp of an HTML video?

Community
  • 1
  • 1
kakbar231
  • 21
  • 7
  • Do you mean that it shows 0:00 and it does not increase? or you want to just change the format of that timestamp? – callback Apr 07 '16 at 19:50
  • Are you sure it is not just a syntax error? Your jquery snippet has unmatched braces/parens. – MatthewG Apr 07 '16 at 20:32

1 Answers1

0

first, to solve the 0:00 problem, I would change TEXT to HTML

function onTrackedVideoFrame(currentTime, duration){
    $("#current").html(currentTime);
    $("#duration").html(duration);
}

then include MOMENT

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>

convert seconds to milliseconds and create a MOMENT duration

    val = Number(duration) * 1000; //convert seconds to milliseconds
    var d = moment.duration(val);
var show_time = d.hours() + "hours" + d.minutes() + "minutes" + d.seconds() + "seconds";
imvain2
  • 15,480
  • 1
  • 16
  • 21