当滑块项目具有类 .flex-active-slide 时，使 flexslider 视频自动播放答案

【问题标题】：Make flexslider videos autoplay when slider item has class .flex-active-slide当滑块项目具有类 .flex-active-slide 时，使 flexslider 视频自动播放
【发布时间】：2017-04-19 19:33:39
【问题描述】：

我正在使用 flexslider 和 html5 视频标签构建视频滑块。当滑块项具有 .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"); 
}

【问题讨论】：

您需要自动播放当前活动幻灯片的视频吗？如果是，则在幻灯片动画完成后调用的after回调中，找到视频并在其上调用play。
是的，这正是我所需要的。我被卡住了，你能给我举个例子吗？

标签： javascript jquery html html5-video flexslider

【解决方案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

希望这些信息对您有所帮助。

【讨论】：