How to extract duration of a video from a link-CodePudding

I am displaying a video on my website like this:

<video>
    <source src={link} type="video/mp4" />
</video>

And I would like to extract duration of the video from the provided src link, to display it somewhere else on the page. Assume we have the link stored as a string, how will I extract the duration of the video?

Sample src link: https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat/MgttfKqKIDhQ6bgtgy6V/videos/1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d

CodePudding user response：

to get the duration of the video you have to wait for it to load using the event listener and that way you are sure you have the data, this is a link you can use to help you learn more about the API, here.

let video = document.getElementById("video")

video.addEventListener('loadeddata', function() {
    console.log("test", video.duration)
   // Video is loaded and can be played
}, false);


    
function myFunction() { 
  alert(video.duration);
} 

myFunction

<html>
<h1>video duration</h1>
<button onclick="myFunction()" type="button">Get video length</button><br>

<video id="video">
    <source src="https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat/MgttfKqKIDhQ6bgtgy6V/videos/1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d" type="video/mp4" />
</video></html>

CodePudding user response：

The video tag has a "duration" property, which will tell you the length of a video.

https://www.w3schools.com/tags/av_prop_duration.asp

<html> 
<body> 

<button onclick="myFunction()" type="button">Get video length</button><br>
 
<video id="myVideo" width="320" height="176" controls>
  <source src="https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat/MgttfKqKIDhQ6bgtgy6V/videos/1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d" type="video/mp4">
</video>

<script>

function myFunction() { 
  let vid = document.getElementById("myVideo");
  alert(vid.duration);
} 
</script> 

</body> 
</html>

CodePudding user response：

use Javascript:

<video id="videoEl">
    <source src={link} type="video/mp4" />
</video>
const obj = document.getElementById("videoEl");
console.log(obj.duration);

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration