Javascript 媒体视频播放器HTML5 JS

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

为此，我在JS中使用HTMLMEDIALEMENT 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>

---

但现在我的问题是我用[ObjectHtmlPanelement]代替了0:00，用NaN代替了20:03…

我建议您在

oncanplay

函数中初始化js代码，该函数将在视频播放完毕后立即调用

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

var vid=document.queryselectoral（“视频”）[0]；
var current=document.getElementById（“当前”）；
var total=document.getElementById（“总计”）；
vid.oncanplay=函数（）{
vid.ontimeupdate=函数（）{
current.innerHTML=Math.floor（vid.currentTime）+“s”；
total.innerHTML=Math.floor（vid.duration）+“s”；
}
}

.wrapper{
位置：相对位置；
}
p{
位置：绝对位置；
排名：0；
左：0；
边框：2件纯黑；
背景：白色；
保证金：0；
填充物：5px；
}

您的浏览器不支持HTML5视频。

当前时间：

总时间：

您的

var currentTime

似乎只是在播放或暂停时更新的，我不知道这是否是您的意图。您是否查看过此：？

文档。页面呈现时写入
只执行一次，它不是动态绑定。是的，我刚刚意识到^^我用我的新代码编辑我的帖子为什么
setInterval
而不是event listener？这似乎是
timeupdate
的完美用例。您是对的，使用timeupdate事件将是一种更好的方法，updated。
/**
 *  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;