媒体视频播放器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代码，该视频会在播放oncanplay立即调用。

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

 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>