0

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%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d

Inaara Kalani
  • 265
  • 7
  • 24

2 Answers2

1

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%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-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>
mhaendler
  • 124
  • 5
  • Ok. But can I extract the duration from just the link itself? Without using javascript to get the video element? – Inaara Kalani Sep 20 '22 at 08:25
  • You can load the element into a hidden video tag and then extract the duration out of it. How do you mean, "doing it without using javascript"? – mhaendler Sep 20 '22 at 08:31
  • I am using React Js, does that help? I'll see if there is another way, otherwise, hidden video tag idea sounds good. Thank you. – Inaara Kalani Sep 20 '22 at 08:36
1

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%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d" type="video/mp4" />
</video></html>
Chamsddine Bouzaine
  • 1,299
  • 10
  • 17
  • Ok. But can I extract the duration from just the link itself? Without using javascript to get the video element? – Inaara Kalani Sep 20 '22 at 08:24
  • could you elaborate more on what you mean, by using javascript like using HTML only? unfortunately the HTML language don't provide such an API you need the js to get the duration dynamically – Chamsddine Bouzaine Sep 20 '22 at 08:28
  • I mean I can use javascript, but like is it possible to process the link itself rather than to display the video element, select it and then get the duration? I am using react Js, if it helps. – Inaara Kalani Sep 20 '22 at 08:35
  • 2
    you can try to use this library https://www.npmjs.com/package/get-video-duration to get the video duration from a URL I never used. it before but it seems legit, you should know that for this kind of computation you need a processing entity like in this case was HTML 5, or in the case of this library the guy is using ffprobe which is a multimedia framework for processing videos and they. are quite heavy i would recommend that you should do this things on the backend side for a faster and lighter front end – Chamsddine Bouzaine Sep 20 '22 at 09:28