slick clones causing problems with autoplay videos on first slide

acki commented 7 years ago

Slick create clones for endless plays. If you have an autoplay video on first slide, the video got playing two times and the clones video can't be stopped. If you remove the video clone with jQuery, this won't work in Safari, because Safari shows the clone everytime on top and not the normal slide div.

====================================================================

http://jsfiddle.net/fj8dv89a/

(Video owned by myself)

====================================================================

Steps to reproduce the problem

Add a youtube autoplay video to first slide
You will hear the sound is double
Stop the video and you will hear the sound of clone video still playing

====================================================================

What is the expected behaviour?

Not to doubleplay the video.

====================================================================

What is observed behaviour?

See above

====================================================================

More Details

Which browsers/versions does it happen on? every
Which jQuery/Slick version are you using? newest
Did this work before? can't tell

acki commented 7 years ago

@redacherifi @CHEWX

ooloth commented 6 years ago

@acki Did you ever solve this issue?

I'm trying to create a slider of YouTube videos that load and autoplay when their video thumbnail is clicked (I'm starting with images instead of iframes so touch swiping will work). I'm running into the same doubled-sound issue because of the cloned version of slide.

I'd prefer to fix this without turning off the infinite setting...

CHEWX commented 6 years ago

@ooloth No, after about 4 years of using Slick, it's gone downhill with such huge problems as this that do not get the attention they need.

As such I've switched to Flickity which has great support and doesn't have this issue :)

I know that doesn't help, but wanted to reply.

ooloth commented 6 years ago

@CHEWX I appreciate the thoughts!

I'd switch to Flickity if only it had a fade effect. Since it doesn't, I still use Slick (via react-slick).

CHEWX commented 6 years ago

@ooloth You can most certainly replicate a fade transition with a little CSS — https://codepen.io/eikeco/pen/MwGRKr

A lot less hacky than it will be to get Slick to work with a video on the first slide anyway.

JasonLandbridge commented 6 years ago

@CHEWX I'm having to deal with these problems now too and having almost build my entire website around Slick, with still many bugs left which are related to Slick, I will need to make the jump to Flickity as well. Thank you very much for this suggestion @CHEWX . Please tell me that Flickity is the best one out there and I won't have to keep jumping ship.

I will say thank you to the developers behind Slick, I still greatly appreciate your work!

CHEWX commented 6 years ago

@JasonLandbridge To put your mind at rest, it's the best out there :) Just make sure you send the owner 25 bucks for his work and he'll be sure to support you.

MGParisi commented 5 years ago

Just ran into this problem on a site not created by me. With Slick (and another issue) the video is playing three times on this website. Ive removed one but now I hit this issue as well. It's sad. This site has been running for YEARS. No one saw that the video was running so many times.

CHEWX commented 5 years ago

@MGParisi Well the quickest fix is to set infinite: false

It's not a necessity.

sporkman commented 4 years ago

Bumping this in case the author starts working on this again. Not interested in flickity (backlog of issues on that project as well, lacks some slick features).

Would be nice to come up with some kind of workaround that allows the infinite scroll but not duplicated videos. The clone is never fully visible, so even using a poster frame or something would be nice, and even if we had to set that frame in some convoluted way...

ghost commented 4 years ago

has anyone found a solution for this? I am setting opacity for other slides and active is different, once the slide goes back to the first one, it is jumpy and not smooth

patburke234 commented 2 years ago

Old one, but I ran into this issue with react-slick. I fixed it by adding the following the video element. Basically, if it's not the active, it's not visibly shown and thus should never actually play the video. (typescript, react)

<video
    autoPlay
    ...
    onPlay={(ev) => {
        const videoElem = ev.target as HTMLVideoElement;
        const slideElem = videoElem.closest('.slick-slide');
        if (slideElem && !slideElem.classList.contains('slick-active')) {
          videoElem.muted = true;
          videoElem.pause();
        }
      }}
      />

gg-123869 commented 9 months ago

.slick-cloned video{ display: none; }

kenwheeler / slick