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

Add comment

Bartosz Termena staff answered 5 years ago

0 0 Best answer

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

Add comment

Sibi Andrews answered 5 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

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

Sibi Andrews

25Support score
3Questions 1Answers

0Snippets likes 0Snippets