Make flexslider videos autoplay when slider item has class .flex-active-slide

Question

I am building a slider of videos using flexslider and html5 video tag. How can I make the video autoplay when the slider item has a class of .flex-active-slide?

Any help is appreciated

Here is HTML:

<div class="flexslider_fade">
            <ul class="slides">
                    <li><video onload=playVideo() onplay=pauseslider() onpause=playslider() onended=resumeslider() controls preload="none" width="100%" height="100%">
                        <source src="videos/myvideo.mp4" type='video/mp4' />   
                    </video></li>
                    <li><video onplay=pauseslider() onpause=playslider() onended=resumeslider() controls preload="none" width="100%" height="100%">
                        <source src="videos/myvideo2.mp4" type='video/mp4' />  
                    </video></li>
                    <li><video onplay=pauseslider() onpause=playslider() onended=resumeslider() controls preload="none" width="100%" height="100%">
                        <source src="videos/myvideo3.mp4" type='video/mp4' />  
                    </video></li>
</ul>

and the JS:

$(window).load(function() {
          $('.flexslider_fade').flexslider({
                slideshow: true,
                animation: "fade",
                animationLoop: true,
                video: true,
                /* reload video on navigation */
                before: function(){ 
                    $('video').each(function() { 
                        $(this).get(0).load(); 
                    });
                },
                after: function(){
                    $('video').each(function() { 
                        if($('.flexslider_fade li').hasClass('flex-active-slide')){
                        $(this).find('video').attr('autoplay', true);
                    }
                    });
                }
              });
});


function pauseslider() { 
    $('.flexslider_fade').flexslider("pause"); 
}
function playslider() { 
    $('.flexslider_fade').flexslider("play"); 
}
function resumeslider() { 
    $('.flexslider_fade').flexslider("next"); $('.flexslider_fade').flexslider("play"); 
}

Answer 1

Here is one way to accomplish what you need, basically when you are on the active slide, play the video. On before callback just reload video as you have right now. Below is a sample and link to a working example:

HTML:

<div class="flexslider" id="slider">
  <ul class="slides">
  <li id="slide1"><video controls id="myVideo1" src="test1.mp4" width="360"></video>
    </li>

    <li id="slide2"><video controls id="myVideo2" src="test2.mp4" width="360"></video></li>
  </ul>
</div>

JS:

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "fade",
    animationLoop: true,
    video: true,
    slideshow: true,
    before: function(){ 
        //reload video            
        $('video').each(function() { 
            $(this).get(0).load(); 
        });
    },
    after: function(){
        //get active id and set it
        var active_id = $('.flex-active-slide').attr('id');


       //check for which slide is active 
        if( active_id == "slide1"){
            //play video and pause the slider
              myVideo1.play();
              $('.flexslider').flexslider("pause");
              //on video ended go to next slide and play slider
              myVideo1.onended = function(){
                $('.flexslider').flexslider("next");
                $('.flexslider').flexslider("play");
              }
        }
        if( active_id == "slide2"){
            //play video and pause the slider
              myVideo2.play();
              $('.flexslider').flexslider("pause");
              //on video ended go to next slide and play slider
              myVideo2.onended = function(){
                $('.flexslider').flexslider("next");
                $('.flexslider').flexslider("play");
              }
        }

    },
  });
});

Working sample here: https://jsfiddle.net/l33tstealth/L3m67fqe/51/

Sample derived from this answer on a another question: https://stackoverflow.com/a/28419557/7564143

Hope this information helps.