How can I make a video play and then disappear when my Wix page is clicked on?

Ask the community
,
1

I want a video to play and then disappear after it finishes on my wix website and I have tried to use this code $w . onReady ( function (){ // Start the video if ( $w ( “#videoPlayer1” ). isPlaying ){ $w ( “#videoPlayer1” ). pause ();} else { $w ( “#videoPlayer1” ). play ();} setTimeout (() => { $w ( “#videoPlayer1” ). hide ();}, 10000 ); // 10000 is the time of your video in milliseconds });

and this code
$w . onReady ( function () {

$w ( ‘#videoPlayer1’ ). onViewportEnter (()=>{
$w ( ‘#videoPlayer1’ ). collapse ()
})
and it is still not working? please can someone help me ASAP I don’t know what I am doing wrong

2

I think there are a lot of possibilities of how to detect if a video is playing or not.
When using a VIDEO → every VIDEO has a specific playtime.

Let us first take a quick look onto the Wix-VideoPlayer-API…
https://www.wix.com/velo/reference/$w/videoplayer

So which of the offered options you could use for your needs?

  1. currentTime → Could we maybe use this one? → maybe!
  2. duration → Could we maybe use this one? → maybe!
  3. isPlaying → Could we maybe use this one? → maybe also possible!

But what about this one ???
onEnded( )

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

This should give you back as result the current ID of your VIDEO-ELEMENT, whose play-time has been ended (stopped)!

3

Hi, thank you for trying to help but when I do this it says that there is a type error? :frowning: any idea as to why it is saying this?

1212×164 13.9 KB

4

@russian-dima Please read the above message

5

Of course you have to put it into the onReady-section…like…

$w.onReady(function() {console.log("Page is ready!");
    $w("#myVideoPlayer").onEnded((event) => {
        let targetID = event.target.id; // "myVideoPlayer"
        console.log("Playtime of "+targetID+"has been ended!")
    });
});
6

@russian-dima Hi, sadly it’s still saying this and not playing my video :frowning: Any tips on how to fix this?

2876×164 17.8 KB

7

Tested the code and everything works just fine.

$w.onReady(function() {console.log("Page is ready!");
    $w("#videoPlayer1").onEnded((event) => {
        let targetID = event.target.id; // "myVideoPlayer"
        console.log("Playtime of "+targetID+"has been ended!")
    });
});
  1. You are using a simple single-video-player ?

710×373 116 KB

  1. You have changed the ID of your Video-Element in inside your code?

CONSOLE-LOG-RESULT: (after video-playtime ended)…

989×262 6.34 KB

Fix:

console.log("Playtime of "+targetID+" has been ended!")
8

Hi, its playing but for some reason it is still not disappearing? Do you know why this could be? @russian-dima

9

I have also tried this code as I didn’t know if this is what you meant by changing the ID @Velo-Ninja

824×232 23 KB

10

You have to expand your code.
It is not disappearing, because the wished behaviour is not coded, yet.

$w.onReady(function() {console.log("Page is ready!");
    $w("#videoPlayer1").onEnded((event) => {
        let targetID = event.target.id; // "myVideoPlayer"
        console.log("Playtime of "+targetID+"has been ended!")
    });
});

Expanded version…(PLAYER will close after end of playtime)…

$w.onReady(function() {console.log("Page is ready!");
    $w("#videoPlayer1").onEnded((event) => {
        let targetID = event.target.id; // "myVideoPlayer"
        console.log("Playtime of "+targetID+"has been ended!")
        $w("#videoPlayer1").hide(); $w("#videoPlayer1").collapse();        
    });
});

Expanded version-2 …(PLAYER will close (fade-out-effect) after end of playtime)…

$w.onReady(async function() {console.log("Page is ready!");
    $w("#videoPlayer1").onEnded((event) => {
        let targetID = event.target.id; // "myVideoPlayer"
        console.log("Playtime of "+targetID+"has been ended!")
        await $w("#videoPlayer1").hide('fade'); $w("#videoPlayer1").collapse();        
    });
});