"autoplay" for video html element does not work.

[mikurovi]

Hello,

I've noticed that the "autoplay" attribute for an html video placed inside the flickity carousel cell does not work -- it does not autoplay. The video can only be played when it has "controls" set up and the play button is pressed.

Note that I did verify that the autoplay works when the video is outside the carousel section.

Any way to fix this?

Here's a sample code from a guide:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

[desandro]

I'm sorry to see you're having trouble with Flickity. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

[mikurovi]

Here it is: https://codepen.io/anon/pen/NXMNyW

[desandro]

Thanks for that. This indeed looks to be a bug in Chrome and Safari, but not Firefox.

One solution is to initialize Flickity in JS and call video.play() after that.

var flkty = new Flickity('.carousel');
var video = document.querySelector('video');
video.play();

See demo https://codepen.io/desandro/pen/44a6f121a4089ebd2e59f51ae7b66235/

[mikurovi]

Thanks for this. It worked.

[mikurovi]

I have another question. I'm not sure if I should create a new thread or not, but I noticed that if there is a video on multiple cells only a single video plays (the one selected when the page loads). Now I believe that the logic here is that whatever is selected that should be the one to autoplay. What is the Jquery equivalent of the "is-selected" class?

I think the logic goes something like this:

$(".carousel").is-selected(function() { video.play(); });

Here's the test case: https://codepen.io/anon/pen/jYpMPw

[desandro]

If you wish to start autoplay on all videos in the carousel, That code would look like:

// init Flickity
var $carousel = $('.carousel').flickity({...});
// trigger play on all videos
$carousel.find('video').each( function( i, video ) {
  video.play();
});

If you rather start playing a video only when its cell is selected, that code would be:

// init Flickity
var $carousel = $('.carousel').flickity({...});

// get Flickity instance
var flkty = $carousel.data('flickity');

function playOnSelect() {
  var video = flickity.selectedElement.querySelector('video');
  video.play();
}

// play initial video
playOnSelect();
// play video on select
$carousel.on( 'select.flickity', playOnSelect );

[cameroncowden]

Updating the function so it only tries to play the video if the current slide contains a video (preventing console errors).

function playOnSelect() {
  var video = flkty.selectedElement.querySelector('video');
    if (typeof(video.play) == "function") {
      video.play();
    }
}