Video cover image

Ask the community
1

Hi All,

I have a video with a cover image that I have set to play on click, end but allow replay. However, when the video ends it simply shows a black screen - is there any way of getting it to “reset” and show the cover screen again after playing?

Thanks
Victor

2

Hello @vicsoaza,

To avoid getting too technical, considering I’m not aware of your specific setup, you can work with two APIs for this purpose.

Firstly, utilize the onEnded() event within the video player API:

$w("#myVideoPlayer").onEnded((event) => {
  let targetId = event.target.id; // "myVideoPlayer"
});

Following that, you can use the poster() API to set the video’s ‘poster’ image. This should be done within the onEnded event:

$w("#myVideoPlayer").poster = "some url here or item from dataset field";

Although I’m not extensively familiar with these APIs for the component, during the onReady phase, you could retrieve the current set poster:

let videoPoster = $w("#myVideoPlayer").poster;

Then, based on the above, assign the URL using your ‘videoPoster’ variable.

I hope this explanation clarifies things for you!

3

Hi robert

I am not familiar with coding at all but I will try follow. One thing is that I am not using a video player but rather a standard videobox and one of the things that can be chosen is the cover image in the design section (see image attached). It is this image that I would like to start with but also end with for the playing of the video

thanks
Victor
Capture

4

I found this script which I think will work if I understand what is being done as:

  • once video ends, display the image who’s id is #image36

$w ( “#videoBox3” ). onEnded (() => {
$w ( ‘#image36’ ). show ()
});

The issue I don’t understand is where is this image36 during normal operation? is it hidden? is it behind the videobox? where do I put that image?

5

bump … anyone got any help here?