How to stop the previous playing video in the repeater?

Ask the community
,
1

I have a repeater. In the repeater is a videoplayer. The videoplayer shows a different video for each element / item. The videos are from my dataset.

Question: When the user plays the first video. How can I program it, when the user starts the video in another element / item, that the first video stops and does not continue playing?

Unfortunately I can’t come up with a workable solution. Thanks for your help :slight_smile:

2

We can select all video players on the page using selector by element type

/** @type {$w.VideoPlayer & $w.VideoPlayer[]} */
const allVideos = $w('VideoPlayer');

Then we can set up an event handler for all elements of this group.

allVideos.onPlay((event) => {  });

Then we use a loop to check all videos from the group.
If it isn’t a current video and if it is playing now then we pause it.

allVideo.onPlay((event) => {
  allVideo.forEach((video) => {
    if (video.isPlaying && video !== event.target) {
      video.pause();
    }
  });
});

Snippet:

$w.onReady(() => {
  /** @type {$w.VideoPlayer & $w.VideoPlayer[]} */
  const allVideo = $w('VideoPlayer');

  allVideo.onPlay((event) => {
    allVideo.forEach((video) => {
      if (video.isPlaying && video !== event.target) {
        video.pause();
      }
    });
  });
});

Demo:

Docs:

3

thank you very much for your support.
forEach is red underlined.
I get the message: Property ‘forEach’ does not exist on type VideoPlayer

4

You probably didn’t copy and paste it correctly.
Anyway you asked about video in a repeater, so I don’t think Alexander’s answer is relevant (as the event.target is the same for all items).

You can try:

$w("#videoPlayer1").onPlay(event => {
$w("#repeater1").forEachItem(($item, itemData) => {
if(event.context.itemId !== itemData._id && $item("#videoPlayer1").isPlaying){
	$item("#videoPlayer1").pause();
}
})
})
5

@jonatandor35

Hello,
Thank you very much for helping me. I don’t have so much experience yet but it’s getting better.

I do not know why, unfortunately it does not work with this code. It also pauses directly the video what should be played. I also tried with “viewPortLeave” but it only worked for the first element in the repeater.

It is really strange. I use the same code but refer to the container. Then it works fine.

export function container1_click ( event ) {
$w ( “#repeater1” ). forEachItem (( $item , itemData ) => {
if ( event . context . itemId !== itemData . _id && item ( “#videoPlayer1” ). isPlaying ){
$item ( “#videoPlayer1” ). pause ();
}
})
}

6

@m1penz
Improve the snippet. There is a TypeScript checker don’t know about types. We can help TS with types.

JSDoc

/** @type {$w.VideoPlayer & $w.VideoPlayer[]} */
const allVideo = $w('VideoPlayer');
7

@jonatandor35
The target property will equal an item that is clicked. The demo is used my snippet and it works

https://shoonia.wixsite.com/blog/video

My example works not only with repeater. It works generally with all video on the page

8

@alexanderz61239 I tried your code and it didn’t work for me with repeaters,

9

@m1penz There’s a bug on wix side that doesn’t return event.context.itemId for videoPlayer.onPlay. I reported it, meanwhile you can do the following:

$w.onReady(() => {
$w("#repeater1").onItemReady(($item, itemData) => {
$item("#videoPlayer1").onPlay(event => {
$w("#repeater1").forEachItem(($i, iData) => {
if(iData._id !== itemData._id && $i("#videoPlayer1").isPlaying){
	$i("#videoPlayer1").pause();
}
})
})
})
})
10

Hi, even if this post is a bit older. I have exactly the same problem but none of your codes have been able to help me so far. On my home page (with individual video players) it does not work on another page when the videos are in a repeater. Do you have any tips?
My page: creativlinge.com/Logo-Teaser