how to get html5 video total duration displayed without playing the video - html

Question

I do found something online that is just about to be similar to what am trying to achieve, but here are a few problems i encountered. (1) i want the time be in minutes and seconds format. (2) the code only works for a single video in my html file. how can i make the code work for multiple videos in my file all showing their different durations. below is the code
<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>
This is what I want to achieve using codeigniter

Answer 1

Like this:
<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>
You may need to do some tweaking, and there is probably a more efficient way to do this, but this is what I do.