Question

我正在使用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"); 
}

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

希望这些信息有所帮助。

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

1 个答案: