媒体视频播放器 HTML5 JS

Posted 2023-05-07

【中文标题】媒体视频播放器 HTML5 JS

【英文标题】：Media video player HTML5 JS

【发布时间】：2017-06-18 06:02:08

【问题描述】：

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

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

一切正常（播放、暂停、重启……），但持续时间和当前时间不起作用，我不知道为什么。我通常不会用 JS 编写代码，所以请不要介意^^

这是我的代码：

<div class="wrap_video">
    <video id="video"  >
         <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 ...

【问题讨论】：

您的var currentTime 似乎只是在播放或暂停时更新，我不知道这是不是您的意图

你看过这个吗：***.com/questions/6380956/… ?

document.write在页面渲染时只执行一次，不是动态绑定。

是的，我刚刚意识到 ^^ 我用我的新代码编辑了我的帖子

【参考方案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  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>

【讨论】：

为什么是setInterval 而不是timeupdate 事件监听器？这似乎是timeupdate 的完美用例。

你说得对，使用 timeupdate 事件会是更好的方法，更新了。