Question

I just need to display the current time under a video in jwplayer using the timeUpdate event. What is the simplest way I could do this? thanks

Was it helpful?

Solution

Here is some sample code:

<!DOCTYPE HTML>
<html>
<head>
<title>onTime</title>
<style type="text/css">
    body {
        font-size:1em;
        line-height:1.8em;
    }
    h2,#timer {
        background-color:#000;
        color:#0f0;
        font-size:2em;
        margin:0em;
        width:200px;
        height:1.2em;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://p.jwpcdn.com/6/8/jwplayer.js"></script>
<script type="text/javascript">
 $(document).ready( function() {
    jwplayer("container").setup({
            file:"http://content.bitsontherun.com/videos/bkaovAYt-364766.mp4",
            events: {
            onTime: function(event) {
                $('#timer').html(Math.floor(event.position));
            }
        }
    });
 });
</script>
</head>
<body>
<div id="container"></div>
<br />
<h2>Timer:</h2>
<div id="timer"></div>
</body>
</html>

OTHER TIPS

And this is how you get remaining time off the video in min ,hour, sec

jwplayer('video_player').onTime(

        function(event) {

     
   $('#timer').html(secondsAsTime(event.duration ));
        }
    );
<script>
function secondsAsTime(seconds) {
    var hours = Math.floor(seconds / 3600);
    seconds -= hours * 3600;
    var minutes = Math.floor(seconds / 60);
    seconds = Math.floor(seconds % 60);
    function pad(n) {
        return (n < 10) ? '0'+ n : n;
    }
    return pad(hours) +':'+ pad(minutes) +':'+ pad(seconds);
}
</script>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top