媒体视频播放器HTML5 JS

Question

我想显示我的视频的持续时间和实际时间。

为此，我在JS中使用HTMLMediaElement API。

一切都在工作（播放、暂停、重新启动等），但持续时间和当前时间不起作用，我不知道为什么。我通常不用JS编码，所以请没事^^

这是我的代码：

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

和我的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;
}

其实我只想显示当前的时间和持续时间

编辑：好的，现在我有了：对于当前时间

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

但是现在我的问题是我有 [ObjectHTMLSpanElement] 而不是 0：00 和 NaN 而不是 20：03 ...

Answer 1

我建议你在oncanplay函数中初始化你的js代码，一旦视频可以播放，就会调用。

对于时间问题，我会设置一个单独的计时器，每秒检查一次视频时间并相应地更新它：

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>