How to show video player duration?

Ask the community
,
1

Hey,

I am trying to show the duration of a video; but this code doesn’t work.

1988×645 34.6 KB

Can anyone help me please?
ps: there is no error

Thanks in advance!

2

Yes the type is number as shown in the Wix API reference, whilst you are trying to show it as text.

If you are wanting to display it in a text box, then you will need to use .toString() to change the number to text string so that it can be shown.

3

Thanks for your help!

$w.onReady( () => {
let duration = $w(‘#video’).duration;
var number = duration.toString()
console.log( typeof duration, typeof number);
$w(‘#duration’).text = number;
});

I tried this code; but this does not work

4

I know this may be irrelevant. However, you need to capture the duration of the video after the video has been played, either by the User clicking the video’s play button or by using the .play() function on the video element. The video MUST be played, as the data you are requesting is only available when the video resource has been fetched, not when you apply a video element with an URL in it’s src property.

So, a solution to your issue would be to hide the text element until the video has played.

export function video_play() {
	var i = $w("#video").duration
	if (i > 0){
		$w("#duration").text = String(i)
		$w("#duration").show()
	}
}

To have the duration data before the video loads is possible, but it calls for you to use this same method to capture the duration of the video, then store the duration info into a Collection along with the video’s URL so you may reference the collection item. Below is an image where my Users upload and store their videos, I am able to display the duration (converted from seconds into a timestamp-like format) in a table without having to load the video.

image
image1053×700 55.3 KB