1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Video Carousel Not Autoplaying in Chrome

michaelkchen free asked 6 years ago

Hello, For my angular site I am using the angular version of mdbootstrap. The video carousel does not autoplay in chrome but works in other browsers. Initially it does not play but if I switch to another section on my site and switch back it will then start to play. The site is michaelkchen.com

michaelkchen free answered 6 years ago

After doing some more research I found the answer. Chrome blocks autoplay unless the video is muted. The normal 'muted' attribute was not working with my project so by using     [muted]="true"    in place of just the 'muted' attribute it mutes the video and is able to autoplay in Chrome.

Arkadiusz Idzikowski staff answered 6 years ago

It looks like it is browser related issue. For me adding muted attribute solved the problem, but I see you have already done that. Please add 'muted' to example from our docs and let me know if that worked. Also please check if there are any errors in your console. https://mdbootstrap.com/angular/advanced/carousel/#video

michaelkchen free commented 6 years ago

I added the example to my project and tested it with the 'muted' attribute. The same issue happens, maybe it is something in my project that is affecting it. Is it possible that the 'muted' attribute is not going through? There are also no errors in my console.

michaelkchen free commented 6 years ago

Thanks for the help Arek, I found the solution and posted it!

Arkadiusz Idzikowski staff answered 6 years ago

Dear michaelkchen, Which version of chrome and MDB do you use? I just checked one of our example in chrome and it seems to be working correctly. Please paste here the code associated with our carousel component. Best, Arek

michaelkchen free commented 6 years ago

Hello Arek, Thanks for responding, I use the latest version of Chrome Version 68.0.3440.106 (Official Build) (64-bit) and MDB Version 6.2.0 Here is the code that I used for the carousal component: <div class="row align-items-start" style="padding-bottom: 5%;"> <!--Carousel Wrapper--> <mdb-carousel [isControls]="true" class="carousel slide" [animation]="'slide'"> <!--First slide--> <mdb-carousel-item> <!--Mask color--> <div class="view"> <!--Video source--> <video id="vid" class="video-fluid" playsinline autoplay muted loop> <source src="./assets/video/batDrop.mp4" type="video/mp4" /> </video> </div> <!--Caption--> <div class="carousel-caption"> <div class="animated fadeInDown"> <h3 class="h3-responsive">Animation</h3> <p>Batwoman</p> </div> </div> <!--Caption--> </mdb-carousel-item> <!--/First slide--> <!--Second slide--> <mdb-carousel-item> <!--Mask color--> <div class="view"> <!--Video source--> <video class="video-fluid" autoplay loop playsinline muted> <source src="./assets/video/orb.mp4" type="video/mp4" /> </video> <!-- <div class="mask rgba-purple-slight waves-light" mdbWavesEffect></div> --> </div> <!--Caption--> <div class="carousel-caption"> <div class="animated fadeInDown"> <h3 class="h3-responsive">Lighting</h3> <p>The Orb</p> </div> </div> <!--Caption--> </mdb-carousel-item> <!--/Second slide--> <!--Third slide--> <mdb-carousel-item> <!--Mask color--> <div class="view"> <!--Video source--> <video class="video-fluid" autoplay loop playsinline muted> <source src="./assets/video/batCape.mp4" type="video/mp4" /> </video> </div> <!--Caption--> <div class="carousel-caption"> <div class="animated fadeInDown"> <h3 class="h3-responsive">Modeling</h3> <p>Bat Cape</p> </div> </div> <!--Caption--> </mdb-carousel-item> <!--/Third slide--> </mdb-carousel> <!--Carousel Wrapper--> </div>
Write
Create snippet
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
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
michaelkchen
17Support score
1Questions 1Answers 0Snippets