Topic: video carousel
**hello I want to know how to make a carousel with youtube videos vimeo with autoplay and autopause when the slide is changed I tried but all the videos are played when the page is reloaded, please could you help me with an example thanks
<mdb-carousel id='Carousel' [animation]="'slide'" (activeSlideChange)="onSlideChange($event)" class="carousel slide carousel-fade" [interval]="10000" [animation]="'fade'">
<mdb-carousel-item>
<div class="carousel-item active" id='home'>
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg"
alt="First slide">
</div>
</mdb-carousel-item>
<mdb-carousel-item>
<div class="embed-responsive embed-responsive-16by9" id='video'autoplay>
<iframe src="https://streamable.com/e/zv5yq7" frameborder="0" width="100%" height="100%" allowfullscreen style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe></div>
</mdb-carousel-item>
<mdb-carousel-item>
<div class="embed-responsive embed-responsive-16by9" id='video2'autoplay loop >
<iframe src="https://streamable.com/e/ymt2gj" frameborder="0" width="100%" height="100%" allowfullscreen style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe></div>
</mdb-carousel-item>
<mdb-carousel-item>
<div class="embed-responsive embed-responsive-16by9" id='video3'autoplay>
<iframe src="https://streamable.com/e/cxncf9" frameborder="0" width="100%" height="100%" allowfullscreen allow="autoplay" style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe></div>
</mdb-carousel-item>
</mdb-carousel>
It looks like in this case you just need to add autoplay parameter to the video URL and the video will play automatically when slide is active and pause when the slide is changed. Here is an example:
https://streamable.com/e/zv5yq7?autoplay=1
We still need to add some fixes to the (activeSlideChange) output because we found that this event is emitted twice in some cases.
Lera Alvarado commented 3 years ago
I had already tried but as I comment with sound they all play at the same time and do not pause when changing
Arkadiusz Idzikowski staff commented 3 years ago
@Lera Alvarado I had the impression during the tests that videos are stopped correctly if not visible on the screen, but it looks like in fact the problem still occurs even with the autoplay=1 settings. We will take a closer look at that and see if we can somehow fix that on our end, but we need to change how the activeSlideChange event is emitted first.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB4 12.0.0
- Device: laptop, phone
- Browser: chrome
- OS: windows, android, ios
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 3 years ago
@Lera Alvarado Could you provide more information about what should happen exactly in this case when you switch slides?
Lera Alvarado commented 3 years ago
when I put autoplay, the videos start at the same time without having reached the corresponding slide because I need it to have audio and when I change the slide, the video does not stop so I need a video carousel with the option of automatic video playback and have the previous one pause when you switch to the next, because when i use iframe dont work
Lera Alvarado commented 3 years ago
hi do you have a solution
Arkadiusz Idzikowski staff commented 3 years ago
@Lera Alvarado We still need some time to test that properly and we will let you know what we found.