First Video sound playing on carousel on second video


Topic: First Video sound playing on carousel on second video

davidpadua pro asked 4 years ago

Hello I made a video carousel with your component for my website with react and I want to go to next video but the previous one does not stop and the sound stays on top of the other. Is there a way to stop the video when I change videos on carousel? Thank you for the help.

You can see the effect here, on videos link: https://www.davidpadua.com/projects/react-caladowood/ As you can see, when I change to the second video, the sound of the first remains playing and that's not what I want.

Thank you for the help. I'm using React free package.


Wojciech Staniszewski staff commented 4 years ago

Hi!

When I check Your page, everything seems to work correctly, the previous video stop after the switch. If the problem still occurs, please send some code or instructions on how to recreate Your problem.

Best regards


davidpadua pro commented 4 years ago

That's because I added a workaround to make this work:

on the MDBCarousel component:onClick={stopVideo}then added the class .carousel-video to the the elements that were added dynamically and in the function stopVideo:

const stopVideo = () => { const myVideos = document.querySelectorAll(".carousel-video"); myVideos.forEach(vid => { vid.pause(); vid.currentTime = 0; }) }

That resolved the problem. But it would be nice if the carousel itself had an option built in to stop the videos when we click next or previous.

Thank you for the response.

P.S. the problem still occurs without that workaround.


Wojciech Staniszewski staff commented 4 years ago

We will consider adding this feature in the next release. Thanks for your suggestion


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: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 5.0.1
  • Device: web
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes