Using Arrays for an event handler

Ask the community
,
1

Hi everyone,

I’m trying to create an array of videos and run a simple function on them. What I want is for the video to stop playing if the user moves out of the viewport of that video. My code below works correctly for a single video:

export function videoTrailer_viewportLeave(event) {
let videoIsPlaying = $w(‘#videoTrailer’).isPlaying;
if (videoIsPlaying)
{
$w(‘#videoTrailer’).stop();
}
}

I have a few videos on this webpage, and want the same function for all of them, so I thought it’d be better to use an array instead, however it doesn’t seem to work with the array. I’ve looked around the forum, but not sure - I think the line $w(video).onViewportLeave is probably wrong. Would love your insights!

$w . onReady ( function () {
let videoArray = [ ‘#videoTrailer’ , ‘#video1Music’ , ‘#video2Sound’ , ‘#video4Visuals’ ];
videoArray . forEach (( video )=> {
let videoIsPlaying = $w ( video ). isPlaying ;
$w ( video ). onViewportLeave (()=> {
if ( videoIsPlaying ) {
$w ( video ). stop ();
}
});
});
});

2

Trying to achieve that one ???
https://russian-dima.wixsite.com/meinewebsite/blank-21

3

Yeah! Something like that. I don’t want it to pause/play again when you go back to the viewport, but yes I do want it to stop. How do I achieve that with an array?

4

@avikcharimusic
I solved it in a totaly another way, but you can try this one…

$w.onReady(()=>{
    $w('Video').onViewportEnter((event)=> {console.log(event.target)});
    $w('Video').onViewportLeave((event)=> {console.log(event.target)});
});

Take a look onto console.
Try also…

$w('Video').onViewportLeave((event)=> {console.log(event.target.id)});
5

@russian-dima Thanks for this - if possible, could you explain this further? I’m not familiar with using console.

6

@avikcharimusic
How to use —> CONSOLE ?

If you are using Chrome-Browser —> Press F-12 and navigate to —> CONSOLE.
If you use Preview-Mode of your Wix-Editor —> just take a look into CONSOLE-section (shown on bottom of screen normaly).

Do some scrolling action and take a look what happens.
Normaly every VIDEO should fire up an event on scrolling (ENTER/LEAVE-VIEWPORT).

There you should find the EVENT-RESULTS.