Show HTML5 duration time in a div in javascript

Question

My problem is simple:

I have the next HTML5 video:

<div class="video_container">
    <video id="home_explainer_placeholder" class="video_placeholder" poster="/static/images/white_background.jpg">
        <source src="/static/videos/zapyo_intro.mp4" type="video/mp4">
    </video>

    <div>Current Time : <span  id="currentTime">0</span></div>
    <div>Total time : <span id="totalTime">0</span></div>

    <div id="home_explainer_overlay" class="placeholder_overlay">
        <div class="video_overlay">
        <div class="play_control">
            <div class="play_button"></div>
            <span class="gray">Click for video</span>
        </div>
        <div class="controls">
            <div class="video_mute off"></div>
            <div class="video_mute on"></div>
            <div class="video_fullscreen"></div>
            <div class="video_play"></div>
            <div class="video_pause"></div>
        </div>
        </div>
    </div>
</div>

I would like to get a backwards timer in JS which will start after I press the play button and stop if somebody presses on pause.

I have tried to do something like this in JavaScript but when I press on my play button, nothing happens ( more, the video do not work ):

$(function(){
    $('#currentTime').html($('#home_explainer_overlay').find('video').get(0).load());
    $('#currentTime').html($('#home_explainer_overlay').find('video').get(0).play());
})
setInterval(function(){
    $('#currentTime').html($('#home_explainer_overlay').find('video').get(0).currentTime);
    $('#totalTime').html($('#home_explainer_overlay').find('video').get(0).duration);
},500)

The HTML for that JS:

<div>Current Time : <span  id="currentTime">0</span></div>
<div>Total time : <span id="totalTime">0</span></div>

Any hints on how would I achieve this ? I want to mention that I don't have a solid JS background so please explain me any solution you come with.

I have verified other simillar questions from so, but nothing worked in my case.

Nope. It just doesn't play it anymore. Just like nothing would happen — Cajuu', Apr 30 '15 at 07:57
`.html()` expects a string as argument, to set a text. You're passing it a.... well, you're calling an API (`.load(), .play()`). — Jeremy Thille, Apr 30 '15 at 07:58
Besides, you really should cache your DOM access, like `var video = $('#home_explainer_overlay').find('video').get(0)` to avoid jQuery searching twice through the DOM every 500ms. — Jeremy Thille, Apr 30 '15 at 08:00
Do you just tried out this answer -> http://stackoverflow.com/questions/6380956/current-duration-time-of-html5-video works for me. — Fer To, Apr 30 '15 at 08:18

score 1 · Accepted Answer · answered Apr 30 '15 at 08:19

Loading video is asynchronous so you need to tap into the event broadcasts for canplay, and for time you can use the timeupdate event.

You can also add the attributes preload="auto" as well as autoplay to the video tag itself (shown below in modified code).

Modified example

var video = $('#home_explainer_placeholder');

// on each timeupdate event we update time data:      
video.bind("timeupdate", function() {
  $('#currentTime').html(video[0].currentTime.toFixed(2));
  $('#remTime').html((video[0].duration - video[0].currentTime).toFixed(2));
  $('#totalTime').html(video[0].duration.toFixed(2));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video_container">
    <video id="home_explainer_placeholder" class="video_placeholder" poster="/static/images/white_background.jpg" preload="auto" autoplay>
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" type="video/mp4">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
            <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
    </video>

    <div>Current Time : <span  id="currentTime">0</span></div>
    <div>Remainding Time : <span  id="remTime">0</span></div>
    <div>Total time : <span id="totalTime">0</span></div>

    <div id="home_explainer_overlay" class="placeholder_overlay">
        <div class="video_overlay">
        <div class="play_control">
            <div class="play_button"></div>
        </div>
        <div class="controls">
            <div class="video_mute off"></div>
            <div class="video_mute on"></div>
            <div class="video_fullscreen"></div>
            <div class="video_play"></div>
            <div class="video_pause"></div>
        </div>
        </div>
    </div>
</div>

Thanks @Ken . What if I want to show minutes + seconds instead of just seconds at `remTime` ? — Cajuu', Apr 30 '15 at 09:37
@Alexander no problem! Check [this](http://stackoverflow.com/questions/18417300/converting-seconds-to-time-format) and [this](http://stackoverflow.com/questions/18015468/convert-seconds-to-h-hr-mm-min-time-format-with-javascript) answer for the time conversion. — , Apr 30 '15 at 19:54

Carsten Løvbo Andersen · Answer 2 · 2015-04-30T08:08:44.237

Maybe this is what your looking for, try it out

Link to JSfiddle

$(function(){
$('#currentTime').html($('#video_container').find('video').get(0).load());                          
$('#currentTime').html($('#video_container').find('video').get(0).play());
})
setInterval(function(){

$('#currentTime').html($('#video_container').find('video').get(0).currentTime);
$('#totalTime').html($('#video_container').find('video').get(0).duration);
$('#RemainingTime').html($('#video_container').find('video').get(0).duration - $('#video_container').find('video').get(0).currentTime)
},500)

score 0 · Answer 3 · edited May 23 '17 at 11:51

Based on the solution from current/duration time of html5 video? :

<div class="video_container">
    <video id="home_explainer_placeholder" class="video_placeholder" controls>
        <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
    </video>

    <div>Current Time : <span  id="currentTime">0</span></div>
    <div>Total time : <span id="totalTime">0</span></div>
    <div> Remaining: <span id="remainingTime">0</span></div>
</div>

And some basic JS:

$(function(){
    $("#home_explainer_placeholder").on(
        "timeupdate", 
        function(event){
          onTrackedVideoFrame(this.currentTime, this.duration);
        });
});


function onTrackedVideoFrame(currentTime, duration){
    $("#currentTime").text(currentTime);
    $("#totalTime").text(duration);
    $("#remainingTime").text(duration-currentTime);
}

And here a JSFiddle: http://jsfiddle.net/4cvvg4b4/3/

works for me at the jsfiddle. -> at the end it is doing the same like Ken's answer. next time a jsfiddle / jsbin would be helpful — Fer To, Apr 30 '15 at 09:03

score -1 · Answer 4 · answered May 19 '15 at 12:19

var video = $('#home_explainer_placeholder');

// on each timeupdate event we update time data:      
video.bind("timeupdate", function() {
  $('#currentTime').html(video[0].currentTime.toFixed(2));
  $('#remTime').html((video[0].duration - video[0].currentTime).toFixed(2));
  $('#totalTime').html(video[0].duration.toFixed(2));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video_container">
    <video id="home_explainer_placeholder" class="video_placeholder" poster="/static/images/white_background.jpg" preload="auto" autoplay>
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" type="video/mp4">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
            <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
    </video>

    <div>Current Time : <span  id="currentTime">0</span></div>
    <div>Remainding Time : <span  id="remTime">0</span></div>
    <div>Total time : <span id="totalTime">0</span></div>

    <div id="home_explainer_overlay" class="placeholder_overlay">
        <div class="video_overlay">
        <div class="play_control">
            <div class="play_button"></div>
        </div>
        <div class="controls">
            <div class="video_mute off"></div>
            <div class="video_mute on"></div>
            <div class="video_fullscreen"></div>
            <div class="video_play"></div>
            <div class="video_pause"></div>
        </div>
        </div>
    </div>
</div>

Show HTML5 duration time in a div in javascript

4 Answers4

Modified example