Hide link/form until video is finished

Ask the community
,
1

This is a sales funnel-type presentation. I would like a video to autoplay in a lightbox, or page, before presenting a next button, or hide a form until the video was finished. I could simply add a clickable link to a youtube annotation, but I want to collect form data. Any ideas to make this happen or an alternative approach? Thanks.

2

So make the NEXT button hidden on load (via the property panel).
Instead of Video element, use a VideoPlayer element.
and inside an onEnded() listener add code for showing the NEXT button:
https://www.wix.com/corvid/reference/$w.VideoPlayer.html#onEnded

https://www.wix.com/corvid/reference/$w.HiddenMixin.html#show

3

Excellent, I’ll give that a try… thank you.

4

Does this look correct?

videoPlayer1 is my Video Player element
button25 is my Next button

$w("#videoPlayer1").onEnded( (event) => {

  let targetId = event.target.id; // "videoPlayer1"

});



if( $w("#videoPlayer1").show ) {

  $w("#button25").show();

}

else {

  $w("#button25").hide();

}
5

Not exactly.
First you have to put everything inside $w.onReady(() => { })
Second you have to put the show() method inside the video.onEnded and without any “if”…

6

@jonatandor35 Closer? :slight_smile:

$w.onReady(function () {

	$w("#videoPlayer1").onEnded( (event) => {

	  let $w("#button25").show();

});
7

@scottmail21

$w.onReady(function () {
$w("#videoPlayer1").play();//start playing automatically
$w("#videoPlayer1").onEnded( (event) => {
        $w("#button25").show();//I removed the "let"
    })  //close the parenthesis
 });
8

@jonatandor35 Thank you. I was really off.

9

@scottmail21 You’re welcome. Just be aware that many mobile browsers won’t let you play a video automatically, so you should think whether to limit this code for desktop only or not.

10

@jonatandor35 What happens if the page is presented in a browser that won’t autoplay? Won’t it simply be ignored?

I found ‘Mobile-only’ code; do I simply state Desktop here instead?

import wixWindow from 'wix-window';
if(wixWindow.formFactor === "Desktop"){  // code that will only run on mobile }
11

@scottmail21 I don’t know what exactly you want to do. You can tell the user to play the video manually (and show the NEXT button once it’s ended as you do for desktop)
But you can decide to make the video optional and always show the NEXT button.
If you choose to go for the latter, then you can do:

import wixWindow from 'wix-window';
$w.onReady(function () {
 if(wixWindow.formFactor === "Desktop"){
   $w("#videoPlayer1").play();
   $w("#videoPlayer1").onEnded( (event) => {
     $w("#button25").show();
    })
 } else {
   $w("#button25").show();
 }
});
12

@jonatandor35 Okay, thank you.