Link to an anchor after video ends

Ask the community
,
1

I have a link (text37) that I would like perform a sequence within my Wix site:
I need it to:

  1. make an embedded video appear (expand)
  2. play the video, and when the video is over,
  3. go to an anchor on another page of the same site.

So far I can do the first two with this code:
export function text37_click (event) {
$w(“#videoPlayer1”).expand(),$w(“#videoPlayer1”).play(), $w(“#videoPlayer1”).onEnded( (event1) => {$w(‘#anchorName’);})
However the last bit is not right.

I would be very grateful if someone could point me to a tutorial or tip on how to get it to go to the anchor. It’s not exactly a link, because it shouldn’t require a second click.
I suspect this is very easy to do, but I am having a hard time.

Thank you
Gray

2 
import wixLocation from 'wix-location';//at the very top of the page code
export function text37_click (event) {
    $w('#videoPlayer1').expand();
    $w('#videoPlayer1').play();
    $w('#videoPlayer1').onEnded( event1 =>  {
        wixLocation.to('/page-path#anchorName');// use your page path and your anchor id
    });
}
3

Thank you J.D. That’s just what I need. It will work.
Have a happy new Year

4

Hi JD,

hoping your expertise can help me too, awesome! I’ve tried to create a new post on this but seems there is something up with the forum right now not allowing them to be created (bug reported)

So… here it is:

Hello everyone I was wondering whether I could have some help with something. I’m well aware that video can’t be autoplayed with audio but I want to trigger an unmute with buttons on a page that reveal overlay content to go full screen. I’m new to coding on Velo but have almost got it working using the code below for the three text box areas acting as buttons.

Here is the page:

https://www.beyonddesignagency .com/dance-with-me-short-film

Here is the code:


export function text6_click(event) {$w("#videoBox1").unmute();

}

export function text8_click_1(event) {$w("#videoBox1").unmute();

}

export function text10_click_1(event) {$w("#videoBox1").unmute();

}

The trouble I’m having is that the navigation does still hide (triggered by interactions) and the video does unmute but it pauses and requires a further click to start again (with sound). The video behaviours are set to autoplay and to not stop on clicking (if set to stop on clicking the code doesn’t seem to work). I’ve also tried setting the video behaviour to loop and stop on end but it doesn’t make a difference.

As the text boxes are also active via behaviours to hide / show via the same links I’ve also tried adding an independent unmute sound button which you can see top left. This however leads to the same effect - unmuting but pausing the video requiring a further click with this code so an interaction causing a problem can be ruled out:


export function Sound_click_1(event) {$w("#videoBox1").unmute();
}

I’ve tried to add a second action on another page with .play to try to cancel out the pausing but it doesn’t work or perhaps I’ve added this second one incorrectly?



export function text6_click(event) {$w("#videoBox1").unmute();$w("#videoBox1").play();
}

I also have no idea why but but wo of the entries had to take _1 at the end or it wouldn’t work which I discovered by accident.

I’m worried because of autoplay restrictions that the videobox may not be capable of doing what I need?

If this is the case I was wondering whether a complicated workaround could be to set a off a lookup of the video playing time code at the click moment it get paused on triggering the action and set off a new video to start playing at that moment somehow either the same video or another layered on the page which is unhidden and the original video hidden. This would obviously be far from ideal and I guess a small lag but perhaps something to explore if its a brick wall in the first instance. Gasp!

Would be really grateful of any help!

5

I don’t see this problem when I try it. So I can’t tell.
See here: https://noam345.wixsite.com/mysite-21
Isn’t that what you wanted?

6

Hey J.D. yes that’s exactly what I want but controlling a video in the background but I guess with an ID it makes no difference.

So on the page below if you click the sound icon top left it doesn’t pause?

Thanks so much for your help.

7

I tried it on your page and it did not pause.

8

Thanks JD I just tried it on Chrome and it works there but Safari is pausing it… strange one…I wonder if its because of a conflict with the behaviour feature to make the menu disappear will try just adding it to an independent sound icon. Probably best I make the sound toggle do you happen to know how to alter the code for this? Thanks a lot.

9

Hey JD, I tried the above code however, I think I might be missing something at the end. I’m also trying to have the video background play and then go directly to our home page.
Here is what I used:
import wixLocation from ‘wix-location’;//at the very top of the page code
export function text37_click (event) {
$w(‘#videoPlayer1’).expand();
$w(‘#videoPlayer1’).play();
$w(‘#videoPlayer1’).onEnded( event1 => {
wixLocation.to(‘www.nothingpink.org’);// use your page path and your anchor id
});
}