Flexslider (Woothemes)의 HTML5 비디오 일시 중지

Question

누구나 Flexslider (Woothemes)에서 HTML5 비디오를 성공적으로 구현 했습니까? 동영상 재생이 시작되면 슬라이드 쇼를 일시 중지하는 방법을 파악하는 데 문제가 있습니다. Flexslider 문서를 검색했으며 Vimeo로이 작업을 수행하는 방법에 대한 조언 만 제공합니다.

Answer 1

나는 잠시 동안 flexSlider의 HTML5 비디오와 함께 연주 된이 나를 위해 일 것입니다 :

HTML 마크 업 그냥 비디오와 슬라이드의 ID의 주를 가지고, 기본적으로 어떤 flexslider과 동일 그것은 :

<div class="flexslider" id="slider"> 
    <ul class="slides"> 
    <li id="slide1"><img src="./images/slides/slide1.jpg"></li> 
    <li id="slide2"><img src="./images/slides/slide2.jpg"></li> 
    <li id="slide3"><video id="myVideo" src="./videos/myVideo.mp4" style="width:100%;"></video></li> 
    </ul> 
</div> 

그리고 나를 위해 노력하고 무엇 자바

<script> 
$(window).load(function() { 
    $('.flexslider').flexslider({ 
    animation: "fade", 
    controlNav: false, 
    slideshowSpeed: "5000", 
    after: function(){ 
     // sets active_id to the active slide 
     var active_id = $('.flex-active-slide').attr('id'); 
     //if the active slide is the video slide... 
     if(active_id == "slide3"){ 
      //play the video and pause the slider 
      myVideo.play(); 
      $('.flexslider').flexslider("pause"); 
      //when the video has ended, go to the next slide and play the slider 
      myVideo.onended = function(){ 
       $('.flexslider').flexslider("next"); 
       $('.flexslider').flexslider("play"); 
      } 
     } 
    }, 
    }); 
}); 
</script> 

.

슬라이드가 나타날 때 CSS 애니메이션을 추가하려면 동영상을 재생하는 대신 애니메이션 클래스를 ID에 추가해보십시오. 뭔가 같은 :

$(active_id).addClass("slideUp"); 

애니메이션을 트리거 할 CSS 클래스를 추가해야합니다 ..하지만 슬라이드가 완료되면 슬라이드 루프 경우 다시 트리거 있도록 내가 돈 .. 그것을 제거해야 할 수 있습니다

' 그걸 가지고 노는 경험이 많지만 올바른 길을 찾아야합니다. 희망이 도움이 :-)