video carousel

Lera Alvarado asked 7 months ago

**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>

Arkadiusz Idzikowski staff commented 7 months ago

@Lera Alvarado Could you provide more information about what should happen exactly in this case when you switch slides?


Lera Alvarado commented 7 months 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 7 months ago

hi do you have a solution


Arkadiusz Idzikowski staff commented 7 months ago

@Lera Alvarado We still need some time to test that properly and we will let you know what we found.


Arkadiusz Idzikowski staff answered 7 months ago

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 7 months 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 7 months 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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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