Getting duration of video


#1

Hi there,

I’m trying to get the duration of a video.

It’s probably very basic, but since I’m not a programming expert, I don’t know how to get the duration. The documentation says there is a function duration().

I’ve got a videoplayer variable.

var videoplayer = symbol.nodes.video;

But what’s next? I’d say something like videoplayer.nodes.control.duration() or simply videoplayer.duration(). Are there any examples of how to use functions and whats the class-chaining to be done to get these functions to work?

Thanks!


#2

Hi there,

The latter method is the correct way to call the duration function on the video node i.e.

videoPlayer.duration();

This will return the duration of the video the event is called on, in milliseconds.

However, the duration of the video may not be known at the moment you call the function in the script.

As a fail-safe, you can use the function within an ‘.on(“duration”)’ event handler which is emitted once the duration of the video is known.

In the script below I create a reference to my video node and declare a new variable beneath it, which I will later assign the video’s duration to.

Below that, within the event handler, I call the ‘duration()’ function on the video node and assign it’s value to the ‘duration’ variable.

image

I’m then able to use the ‘duration’ variable in other parts of my script, without having to call the function every time.

Also, if you’re looking to learn some scripting you may find the pages linked below helpful:

https://docs.zap.works/studio/scripting/general-principles/

https://docs.zap.works/studio/scripting/typescript-primer/

You’ll also find information on functions, the arguments they take and how to call them on the References section of our docs pages:

https://docs.zap.works/studio/scripting/reference/

Hope this helps.

All the best,
Seb


#3

Thanks for your help Seb.

I tried exactly what you mentioned in the same script I’ve got an on("seen")-function in, but outside the on("seen")-scope. I also tried adding it to a script in my root and I’ve tried it within a new script, which sitting next to the videoplayer (see screenshot at the end of this read).

Still I get an error:

Property ‘duration’ does not exist on type ‘root__videoplayer__sym’

This is my project hierarchy:

P.s.: I’ve send the project file to the support e-mail address to see what’s the issue with the errors when trying to view this exact same project in Zappar for Mac. (Previewing project in Zappar for Mac throws error in dev-tools). Maybe opening that file may clear things up.


#4

Hey,

Looks like you are using the videoplayer subsymbol included in studio, in which case you have to dig into the show script inside the symbol to access the video instance being used. (or extend controls to include duration accessors…)

Try:

let dur = video.nodes.show0.myvid.duration();

or

let v = video.nodes.show0.myvid;
let dur = 0;
v.on("duration", () => { dur = v.duration(); });

And when you want to access the duration, it’s a good idea to keep in mind that the value will be 0 as long as the actual duration is unknown. I think doing a if (dur) check should work for this.


#5

Hi Ferdy,

Apologies, my implementation assumed you were using a local video, rather than a videoPlayer node.

As Ero mentioned, there’s some slight changes needed in order to get the duration of a video linked to the videoPlayer node.

Within the ‘show’ script in the videoPlayer symbol, there is a variable myvid which stores the video attached to the video player.

The video player symbol also emits the event: video:duration when it knows the duration of the video linked to it.

When the event is fired it will call attached handler functions with a single argument, the duration of the video in milliseconds (’d’ in the code example below).

We can use that argument and assign its value to the variable we declared outside of the event handler:

const v = symbol.nodes.videoplayer0;
var dur;

v.on("video:duration", (d) => {
    dur = d; 
});

Hope this helps.

All the best,
Seb


#6

Thanks both @slothling & @sebastian.

I got it working like this, which is probably not the best way:

const videoplayer = symbol.nodes.video;
const v = videoplayer.nodes.show0.myvid;
var video_duration = 0;

parent.on("seen", () => {
    v.on("duration", () => { 
        video_duration = v.duration(); 
    });
    video_duration = videoplayer.nodes.show0.myvid.duration(); 
});