Swiper - how to play video when the slide is active

NGM · April 23, 2021, 10:03am

Wappler Version : 3.9.5
Operating System : windows 10
Server Model: Nodejs
Database Type:mysql
Hosting Type: Heroku
Bootstrap 5

Expected behavior

What do you think should happen?
I am using a swiper to get to different content, when i swipe to get to a video, i expected that the video would play when it comes in view.

Actual behavior

What actually happens?
When I swipe to the video it doesnt play when it comes in view… I have to hit the play control to play it

How to reproduce

See screenshot with Video and swiper settings (note there are 2 videos slides 2 and 3 both with the same settings)

the live version can be seen at https://enienweb.herokuapp.com/home (as of 14.30 on 22/4/21 BST) it reflects the settings shown in screenshot for both videos, items 2 and 3 in the swiper.

Any help greatly appreciated.

Thanks

Teodor · April 22, 2021, 2:02pm

The play in view option is used to play the video when it comes into the viewport when scrolling your page, not when the video is located in a swiper.

NGM · April 22, 2021, 2:16pm

OK thanks… any suggestions as to how i can get it to play when it comes in view?

NGM · April 22, 2021, 8:18pm

Does anyone know if it is possible to know the id of the current slide being shown in a swiper?

I’m thinking that if i knew the id then i can check for the one which is a video and then create an action toplay it?

NGM · April 23, 2021, 9:21am

Hi Teodor,

I’ve tried a few things and im not getting the results i am expecting

Ive found the swiper - change event, that does trigger after each swipe - good
I’ve tried looking at the swiper.index (alert triggered after the swiper change) - but it always seems to be set to 0 so cant use to then play the specific indexed video - not as expected
I thought that a blunt approach may work so that after each swiper change I play the 2 videos (out of 4 - the other 2 being images) - this doesnt play the videos - not as expected

The only way that i can get the video to play is to use the play button on the control associated with the video.

Any suggestions?

Screenshot attached

NGM · April 23, 2021, 9:55am

Not sure if i should create a new bug but the slide control speed doesnt seem to work and it seems to be set to 300 irrespective of the value entered

Teodor · April 23, 2021, 10:00am

Sorry you are jumping from topic to topic here, not sure what the slide animation speed has to do with your initial question.

In order to have your videos auto play when the specific slide is displayed you need to add:

dmx-bind:autoplay="swiper1.index == index"

to each of them. Remove the play in view/autoplay option from the UI.

NGM · April 23, 2021, 10:14am

I tried your fix, unfortunately it didnt work - see screenshot.

My guess is that as per an earlier comment the index doesnt seem to be set / updated ( as part of my multi-hour investigation i used the swiper change event to display the swiper1 index and it was always 0)

Teodor · April 23, 2021, 10:26am

Not sure about that but i just created a test case locally and everything is working perfectly fine.

The easiest way to see the current index is in your browser console dmx.app.data or add {{swiper1.index}} on the page.
The solution i already suggested to you works perfectly fine in my test case, so does the active index.

Screen Recording 2021-04-23 at 13.25.24

NGM · April 23, 2021, 10:32am

Can you share the code that does that please?

Teodor · April 23, 2021, 10:37am

that is the code.
And that’s the one showing the active index:

Can you upload your page somewhere please so i can check what’s not working for you?

NGM · April 23, 2021, 10:54am

Hi Teodor,
just started from scratch and re-created the swiper… still not working (also the slides arent centered but i can work that out once the fundamental problem is solved)

This is live on the following web page https://enienweb.herokuapp.com/home or i can copy the code here?

Teodor · April 23, 2021, 10:56am

Please turn off the loop mode and test again.

NGM · April 23, 2021, 11:01am

the index is now showing the correct number but the videos arent playing

Teodor · April 23, 2021, 11:07am

Please test with some basic settings first. For example, change that cube effect to slide and try again.
Probably these options (loop, 3d effects etc.) are causing the issues.

NGM · April 23, 2021, 11:14am

Hi Teodor,
Thanks … it partially works in slide mode… the videos load the first time they are swiped to but if you swipe back then it doesnt play again… i maybe able to live with this if there isnt something i can do about it?

Teodor · April 23, 2021, 11:25am

What are you trying to do here is not entirely possible. The auto play attribute plays the video once, not every time.
Maybe swiper with video players inside is not the most suitable combination in your case.

NGM · April 23, 2021, 1:14pm

Thanks for your help Teodor, I’ll explore alternatives

JosuOh · February 2, 2022, 8:09pm

Hi, I know that this is an old thread, but I’ve tried an option of using JavaScript to detect when a block is in viewport.
By using the “endTransition” event listener, it’ll play the video if the video is in viewport after the slide has finished its transition. Hopefully this method works for you as well.