Find Video Duration Using Javascript?

Need help Plugins
1

Hi, I am trying to figure out how to get the video duration from a video file URL. I found a plugin that can do this, but it only does this one at a time and cannot do this via a workflow (you need to put the file in the frontend and not just a URL in the backend). I came across this code, which does exactly what I need it to do, however, I am not super savvy when it comes to Javascript, but I am assuming there is some way to out this into the “run javascript” action using the ToolBox plugin, so I can put in the URL of the video file and it can return the duration, as it does with the code: (snippet here and screenshot below) - get duration - Droplr

Screenshot 2023-04-19 at 1.57.33 PM
Screenshot 2023-04-19 at 1.57.33 PM1276×540 61.1 KB

Here is where I got the code from, so you can see it in action: W3Schools Tryit Editor

Thanks and any help would be so great! This is the only step I need to figure out to launch and start using my app.

2

I had a little play around with this and have a solution for you using Run JavaScript and JavaScript To Bubble. You can create HTML elements programmatically with JavaScript.

  1. I created a container for the video element with an HTML ID. On a button click I have a Run JavaScript with:

    let videoElement = document.createElement(“video”);

    videoElement.src = “https://joy1.videvo.net/videvo_files/video/free/2014-12/large_watermarked/Raindrops_Videvo_preview.mp4”;

    videoElement.controls = true;

    videoElement.id = “videoElement”;

    let containerElement = document.getElementById(“videoContainer”);

    containerElement.append(videoElement);

  2. Then I created a Custom Event that I schedule after 1 second to give the video time to load, and a JavaScript to Bubble element to return the duration. The custom workflow contains JavaScript:

    let videoElement = document.getElementById(“videoElement”);

    let videoDuration = videoElement.duration;

    console.log(videoDuration);

    bubble_fn_videoLength(videoDuration);

  3. The JavaScript to Bubble is set to receive a number, publish the value, and trigger an event, which sets a page state so the value can be displayed.

The Ultimate Toolkit plugin has a For Each element, which would allow you to iterate through multiple URLs using an adapted version of this.

Hope that helps!

3

Thanks for this! What I actually ended up doing is I found this nifty API that inspects media and can return the duration: Media Inspector API Documentation (beamcast-beamcast-default) | RapidAPI

1 Like