Media video player HTML5 JS

Question

I would like to show the duration of my video and the actual time.

For this I use HTMLMediaElement API in JS.

Everything is working (play, pause, restart, ...) but the duration and current time aren't working and I don't know why. I dont usually code in JS so please be fine ^^

This is my code :

<div class="wrap_video">
    <video id="video" width="298" height="240">
         <source src="videos/windowsill.mp4" type="video/mp4">
         Désolé, votre navigateur ne vous permet pas de visualiser cette vidéo.
    </video>
 </div>

 <div class="datas">
       <span id="currentTime"><script>document.write(currentTime);</script></span>
       <span id="duration"><script>document.write(duration);</script></span>
 </div>

 <div id="buttonbar">
       <button id="restart" class="btn btn-default" onclick="restart();">
           <span class="glyphicon glyphicon-repeat"></span>
       </button>

       <button id="rewind" class="btn btn-default" onclick="skip(-10)">
           <span class="glyphicon glyphicon-fast-backward"></span><!--&lt;&lt;-->
       </button>

       <button id="play" class="btn btn-default" onclick="playPause()">
           <span class="glyphicon glyphicon-play"></span><!--&gt;-->
       </button>

       <button id="fastForward" class="btn btn-default" onclick="skip(10)">
           <span class="glyphicon glyphicon-fast-forward"></span>
       </button>
  </div>
</div>

And my JS :

/**
 *  Play or Pause the video
 */
function playPause() {

var video = document.getElementById("video");
var button = document.getElementById("play");
var currentTime = 0;
currentTime += document.getElementById("video").currentTime;
var duration = document.getElementById("video").duration;

if (video.paused) {
    video.play();
    button.innerHTML = "<span class=\"glyphicon glyphicon-pause\"></span>";
} else {
    video.pause();
    button.innerHTML = "<span class=\"glyphicon glyphicon-play\"></span>";
    }
}

/**
 *  Restart the video
 */
function restart() {
    var video = document.getElementById("video");
    video.currentTime = 0;
}

/**
 *  Skip the video to the given value
 *
 * @param int value  The value
 */
function skip(value) {
    var video = document.getElementById("video");
    video.currentTime += value;
}

Actually I just want to show current time and duration

Edit : Ok so now I have that : For the current time

setInterval(function() {
document.getElementById("currentTime").innerHTML = document.getElementById("video").currentTime;
}, 1000);

var duration = document.getElementById("video").duration;
document.getElementById("duration").innerHTML = duration;

BUT now my problem is that I have [ObjectHTMLSpanElement] instead of 0:00 and NaN instead of 20:03 ...

Answer 1

I suggest you initialize your js code in a oncanplay function that will be called as soon as the video can play through.

For the time thing, I would set up a separate timer that checks the video time every second and updates it accordingly:

var vid = document.querySelectorAll("video")[0];
var current = document.getElementById("current");
var total = document.getElementById("total");

vid.oncanplay = function() {
  vid.ontimeupdate = function() {
    current.innerHTML = Math.floor(vid.currentTime) + "s";
    total.innerHTML = Math.floor(vid.duration) + "s";
  }
}

.wrapper {
  position: relative;
}

p {
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid black;
  background: white;
  margin: 0;
  padding: 5px;
}

<div class="wrapper">
  <video width="400" controls>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
  <p>
    Current time: <span id="current"></span><br />
    Total time: <span id="total"></span>
  </p>
</div>