Audio plays one slide ahead


Topic: Audio plays one slide ahead

Sibi Andrews asked 5 years ago

In my project first carousel item is an image and second one is video, when the carousel plays the audio of 2nd carousel item is played.


Bartosz Termena staff commented 5 years ago

Hi!

Could you show me your code? Best, Bartosz.


Sibi Andrews commented 5 years ago

Here is my html code https://github.com/sibiandrews/Angular-carousel/blob/master/main.html


Bartosz Termena staff answered 5 years ago

Dear @Sibi Andrews

In video slider, the first slide have to be video autoplay.

To 'hack' this behavior here is my solution:

<mdb-carousel [isControls]="true" class="carousel slide" [animation]="'slide'">
  <mdb-carousel-item>
    <div class="view">
      <div class="vide-fluid">
        <img
          class="d-block"
          src="https://wallpaper.wiki/wp-content/uploads/2017/05/wallpaper.wiki-Full-HD-1920x1080-Nature-Wallpapers-PIC-WPE0012781.jpg"
          alt="First slide"
        />
        <video autoplay [ngStyle]="{ none: none }"></video>
      </div>
    </div>
  </mdb-carousel-item>
  <mdb-carousel-item>
    <div class="view">
      <video class="video-fluid" loop>
        <source
          src="https://firebasestorage.googleapis.com/v0/b/diginot-24fa3.appspot.com/o/Creative%20Flipkart%20Kids%20ad%20-%2030Sec.mp4?alt=media&token=5f9b5720-ddb0-41ea-85aa-f3757572ae6b"
          type="video/mp4"
        />
      </video>
      <div class="mask rgba-purple-slight waves-light" mdbWavesEffect></div>
    </div>

    <div class="carousel-caption">
      <div class="animated fadeInDown">
        <h3 class="h3-responsive">Super light mask</h3>
        <p>Secondary text</p>
      </div>
    </div>
  </mdb-carousel-item>
  <mdb-carousel-item>
    <div class="view">
      <video class="video-fluid" loop>
        <source src="https://mdbootstrap.com/img/video/Tropical.mp4" type="video/mp4" />
      </video>
      <div class="mask rgba-black-strong waves-light" mdbWavesEffect></div>
    </div>

    <div class="carousel-caption">
      <div class="animated fadeInDown">
        <h3 class="h3-responsive">Strong mask</h3>
        <p>Third text</p>
      </div>
    </div>
  </mdb-carousel-item>
</mdb-carousel>

TS:

none = false;
  ngOnInit(): void {
    this.none = true;
  }

You can set video under the image, autoplay it, and then hide it.

Hope it helps!

Best Regards, Bartosz.


Sibi Andrews commented 5 years ago

Thanks for the hack


Uncaught (in promise) DOMException

I get the above error when the hack is running in a loop, Is there any solution for that?https://github.com/sibiandrews/Angular-carousel/blob/master/main.html


Bartosz Termena staff commented 5 years ago

Dear @Sibi Andrews

I refer you to this: https://stackoverflow.com/questions/40276718/how-to-handle-uncaught-in-promise-domexception-the-play-request-was-interru

You can try something with onActiveSlideChange method, and play() your video when there is active slide.

By default, the carousel works only with videos or only with images, so to combine these two behaviors you'll have to figure something out.

Best Regards, Bartosz.


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: 8.3.0
  • Device: Computer
  • Browser: google chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No