媒体视频播放器 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>