如何在不播放视频的情况下显示 html5 视频总时长

Question

我确实在网上找到了一些与我试图实现的目标相似的东西，但这里有一些我遇到的问题。 (1) 我希望时间采用分钟和秒格式。 (2) 该代码仅适用于我的 html 文件中的单个视频。我怎样才能使代码适用于我的文件中的多个视频，所有视频都显示了它们不同的持续时间。下面是代码

<script> var myVideoPlayer = document.getElementById('video_player'), meta = document.getElementById('meta'); myVideoPlayer.addEventListener('loadedmetadata', function () { var duration = myVideoPlayer.duration; meta.innerHTML = "Duration is " + duration.toFixed(2) + " seconds." }); </script> 

<video id="video_player" width="320" height="240" controls poster="something/something.jpg"> <source src="someVideo.mp4" type="video/mp4"> </video>

<div id="meta"></div>

这就是我想要使用 codeigniter 实现的目标

Answer 1

像这样：

<video width="320" height="240" id = "myVideo" controls>
  <source src="someVideo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<script>
var e = document.getElementById("myVideo");
var cancelAlert = false;
var run = function() {
if (e.readyState === 4 && !cancelAlert) {//readyState 4 means it is loaded fully
cancelAlert = true;//This is so that it only alerts once. No spam pls.
alert(e.duration);
}
requestAnimationFrame(run);//This is so that it runs every frame.
};
run();//run the function
</script>

您可能需要进行一些调整，并且可能有更有效的方法来做到这一点，但这就是我所做的。