如何在不播放视频的情况下显示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>

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