Flexslider video sample

Flexslider sample for video

by Glen S

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css">
<div class="flexslider" id="slider">
  <ul class="slides">
  <li id="slide1"><video controls id="myVideo1" src="http://techslides.com/demos/sample-videos/small.mp4" width="360"></video>
    </li>
    
    <li id="slide2"><video controls id="myVideo2" src="http://www.html5videoplayer.net/videos/toystory.mp4" width="360"></video></li>
  </ul>
</div>

JavaScript

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "fade",
    animationLoop: true,
    video: true,
    slideshow: true,
    before: function(){ 
                    $('video').each(function() { 
                        $(this).get(0).load(); 
                    });
                },
    after: function(){
        // sets active_id to the active slide
        var active_id = $('.flex-active-slide').attr('id');
        
       //$('video').trigger('pause');
       
       //if the active slide is the video slide...  
        if( active_id == "slide1"){
            //play the video and pause the slider
              myVideo1.play();
              $('.flexslider').flexslider("pause");
              //when the video has ended, go to the next slide and play the slider
              myVideo1.onended = function(){
                $('.flexslider').flexslider("next");
                $('.flexslider').flexslider("play");
              }
        }
        if( active_id == "slide2"){
            //play the video and pause the slider
              myVideo2.play();
              $('.flexslider').flexslider("pause");
              //when the video has ended, go to the next slide and play the slider
              myVideo2.onended = function(){
                $('.flexslider').flexslider("next");
                $('.flexslider').flexslider("play");
              }
        }
        
    },
  });
});