HTML5 Video autoplay not working with slick.js

Question

Rephrasing the question

HTML5 video autoplay is not working in slick.js on chrome and safari. everthing is working fine in firefox.

Autoplay works fine outside the slick container.

I tried this: Video auto play is not working in Safari and Chrome desktop browser

But cant seem to get it to work.

My slick setup

$(document).ready(function () {
    $('.slick-hero').on('init', function (e, slick) {
        var $firstAnimatingElements = $('div.slick-hero:first-child').find('[data-animation]');
        doAnimations($firstAnimatingElements);
    });
    $('.slick-hero').on('beforeChange', function (e, slick, currentSlide, nextSlide) {
        console.log(nextSlide);

        var $animatingElements = $('div.slick-slide[data-slick-index="' + nextSlide + '"]').find('[data-animation]');
        console.log($animatingElements.length);
        doAnimations($animatingElements);
    });
    $('.slick-hero').slick({
        autoplay: true,
        autoplaySpeed: 7000,
        pauseOnHover: false,
        speed: 1000,
        dots: true,
        fade: true,
        adaptiveHeight: true
    });
    function doAnimations(elements) {
        var animationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        elements.each(function () {
            var $this = $(this);
            var $animationDelay = $this.data('delay');
            var $animationType = $this.data('animation');
            $this.css({
                'animation-delay': $animationDelay,
                '-webkit-animation-delay': $animationDelay
            });
            $this.addClass($animationType).one(animationEndEvents, function () {
                $this.css({});
                $this.removeClass($animationType);
            });
        });
    }
});

Original question: I cant get a simpel HTML5 video to autoplay.

everthing is peachy in Firefox.

My relatively straight forward implementation

<video poster="assets/video/ocean.jpg" id="bgvid" controls autoplay loop muted>
   <source src="assets/video/ocean.mp4" type="video/mp4">
   <source src="assets/video/ocean.webm" type="video/webm">
   <source src="assets/video/ocean.ogv" type="video/ogg">
</video>

This doesn't work!!! the controlls work fine, but autoplay doesn't. I tried opening it in the browser by double-clicking, via localhost and on a my own website... nothing.

The URL´s to the videos are fine, i tested them. Im on a macbook pro using latest version of chrome and safari. Everything works just fine in firefox.

This example works fine: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay,

This example works fine: https://codepen.io/dudleystorey/pen/knqyK

Tried using this allso: https://github.com/VodkaBears/Vide/

The demo files work just fine. But when i trie to implement it on my own code, then it just shows the poster image.

Possible duplicate of [Video auto play is not working in Safari and Chrome desktop browser](http://stackoverflow.com/questions/17994666/video-auto-play-is-not-working-in-safari-and-chrome-desktop-browser) — RamValli, Feb 23 '17 at 11:53

score 3 · Answer 1 · answered Feb 23 '17 at 11:47

Re-posting the answer from a related question:

After using jQuery play() or DOM maniupulation as suggested by the other answers, it was not still working (Video wasn't autoplaying) in the Chrome for Android (Version 56.0).

As per this post in developers.google.com, From Chrome 53, the autoplay option is respected by the browser, if the video is muted.

So using autoplay muted attributes in video tag enables the video to be autoplayed in Chrome browsers from version 53.

Expert from the above link:

Muted autoplay for video is supported by Chrome for Android as of version 53. Playback will start automatically for a video element once it comes into view if both autoplay and muted are set[...]
<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>
Muted autoplay is supported by Safari on iOS 10 and later.

Autoplay, whether muted or not, is already supported on Android by Firefox and UC Browser: they do not block any kind of autoplay.

Please don't add [the same answer](http://stackoverflow.com/a/42414895/4687348) to multiple questions. Answer the best one and flag the rest as duplicates. See [Is it acceptable to add a duplicate answer to several questions?](http://meta.stackexchange.com/q/104227/347985) — FelixSFD, Feb 23 '17 at 11:48

score 0 · Answer 2 · edited May 23 '17 at 12:25

0

If any of the parents of this video tag in your code have any DOM manipulation on them, autoplay won't work in Safari and Chrome. Here's a similar question with answers that should help you:

Video auto play is not working in Safari and Chrome desktop browser

edited May 23 '17 at 12:25

Community

1
1

answered Mar 29 '16 at 14:49

aidangarza

251
2
12

Just found out that everything works fine... It´s the slick.js plug-in that´s the sinner. When i place the video element outside the slider, everything works fine. But im still at square one... i have no idea why it´s behaving like this. – Jens Nielsen Mar 29 '16 at 14:52
Oh, yeah. Slick.js has a lot of DOM manipulation going on. If the video tag is a child of the carousel, Chrome and Safari won't autoplay the video. You'll have to use javascript to play the video. – aidangarza Mar 29 '16 at 14:58
My original answer to check that other question still holds true. There are several solutions in there that will probably fix your problem e.g. adding `preload="true"` to the video tag, or adding a piece of javascript to play the video on the `canplaythrough` event. Honestly, there isn't enough information in your post to help me get to a point where I can debug. Maybe set up a demo for us? – aidangarza Mar 30 '16 at 20:08

HTML5 Video autoplay not working with slick.js

2 Answers2