html5 video slider

[kukac7]

Hi,

Does not work well with the slider cell with html5 video content.

look: http://codepen.io/kukac7/pen/ogMpNB

What could be the problem?

Thank you!

[desandro]

Adding proper support and documentation for HTML5 video is something I still need to do.

But I may have found a short-term solution. See demo CodePen: http://codepen.io/desandro/pen/PwBEgL or vanilla JS CodePen: http://codepen.io/desandro/pen/MYBQbp

$(document).ready( function() {
  var $gallery = $('.gallery').flickity();

  function onLoadeddata( event ) {
    var cell = $gallery.flickity( 'getParentCell', event.target );
    $gallery.flickity( 'cellSizeChange', cell && cell.element );
  }

  $gallery.find('video').each( function( i, video ) {
    video.play();
    $( video ).on( 'loadeddata', onLoadeddata );
  });

});

There are two issues to resolve

1. imagesLoaded does not work with video. This demo adds an event listener to resize cells once its size is set, similar to imagesLoaded.
2. WebKit has a bug where changing the DOM stops autoplay. This demo adds .play() to resume autoplay.

[kukac7]

thank you! :dancers:

[dev4q1]

Hi,

I am also interested and excited to see the support of html5 videos :)

[dcinzona]

+1

[christinechaochao]

+1! Would be nice to mix video and image.

[npredey]

Is there a way to autoplay the carousel when the video is finished playing? I tried setting the autoplay variable to the duration of the video, but nothing moves when the video is finished playing. In fact, even if I set a static autoplay, it still does not auto play.

[desandro]

@npredey I imagine you want trigger next then playPlayer

[coolwebs]

yessss +1

[stefanedberg]

+1

[bryanchalker]

+1....million

[dejardine]

+1

[HandHugs]

is this working for anyone? Im trying to get html5 video to play when the slide is in view, pause when user slides to new slide.

The demos above are not working!

[tdcpepsi]

I have video categories in my website... How would I add the the categories to the Flickity slider??? A category such as "travel-and-event". How would I add or pull the video element into the slider, what functions would I use???

This is an example category: http://www.vtubemobi.com/cat/travel-and-event

[brigleb]

Indeed, I can't get those demos to work, and was really hoping to use Flickity on a current project.

[ianhobbs]

yes same here.... to bad

[jmharveys]

So there's no way to make a html 5video slider with Flickity? I made one, but when you slide it to the next one, the video start.... any idea?!

[jmharveys]

??

[HandHugs]

I got it working eventually with this

this.$slideshow.on( 'cellSelect.flickity', function() {
       $('.slideshow-slide').find('video').get(0).pause();
        $('.is-selected').find('video').get(0).play();
       
      });

[salunet]

var playWholeVideo = true;
				$(this).flickity({
						prevNextButtons: false,
						pageDots: false,
						cellSelector: '.coverItem',
						draggable: false,
						freeScroll: false,
						wrapAround: true,
						autoPlay: false,
						pauseAutoPlayOnHover: false,
						imagesLoaded: true,
						on: {
							select: function (index) {
								var flkty = this;
								$(flkty.selectedElement).find('video').each(function (i, video) {
									if (playWholeVideo) {
										flkty.stopPlayer();
										video.loop = false;
										video.onended = function (e, i) {
											flkty.next();
										};
									}
									video.play();
								});
							},
							change: function (index) {
								if (!playWholeVideo) {
									var flkty = this;
									var previousIndex = index === 0 ? flkty.slides.length - 1 : index - 1;
									var previousElement = flkty.slides[previousIndex].getCellElements();
									$(previousElement).find('video').each(function (i, video) {
										video.pause();
									});
								}
							}
						}

[riddy92]

Could this work with masonry? and if yes, how would it.

[nnmbzr]

Could this work with masonry? and if yes, how would it.

Yeap, easy:

// init Masonry
var $grid = $('.grid').masonry({
  // options...
});

//call when element loaded
function onLoaded( event ) {
  $grid.masonry('layout')
}

// layout Masonry after each image loads
$grid.imagesLoaded().progress(onLoaded);

//*****//-VIDEO LOAD-//*****//

// layout Masonry after each video loads
$grid.find('video').each( function( i, video ) {
  $( video ).on( 'loadeddata', onLoaded );
});

//*****//-//*****//-//*****//