javascript - 当 slider 项目具有 .flex-active-slide 类时，使 flexslider 视频自动播放

Question

我正在使用 flexslider 和 html5 视频标签构建视频 slider 。当 slider 项目具有 .flex-active-slide 类时，如何使视频自动播放？

感谢任何帮助

这是 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>

和 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

这是完成您需要的一种方法，基本上当您位于事件幻灯片上时，播放视频。在回调之前，只需像现在一样重新加载视频即可。以下是示例和工作示例的链接:

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");
              }
        }

    },
  });
});

此处的工作示例:https://jsfiddle.net/l33tstealth/L3m67fqe/51/

从另一个问题的答案中得出的示例:https://stackoverflow.com/a/28419557/7564143

希望这些信息有帮助。