슬라이더 항목이 .flex-active-slide 일 때 flexslider 비디오 자동 재생

Question

나는 flexslider 및 html5 비디오 태그를 사용하여 비디오 슬라이더를 만들고 있습니다. 슬라이더 항목에 .flex-active-slide 클래스가있는 경우 동영상을 자동 재생으로 설정하려면 어떻게해야합니까?

<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 여기

감사입니다 활성 슬라이드, 비디오 재생. 콜백하기 전에 지금 당장 비디오를 다시로드하십시오.

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

희망 사항 inf ormation 도움이됩니다.