2015-10-12 3 views
1

Я использую fullscreen.js для отображения нескольких слайдов, содержащих видео на каждом слайде. Я хотел бы использовать это событие afterSlideLoad сделать следующее:Отключить звук/отключить видео с помощью fullpage.js

  1. Mute предыдущего слайд-видео
  2. приглушения видео в «активном» слайд

Самых дальним я получил это unmuting видео на загрузке слайда2, однако он остается включенным после выхода из слайда на следующее видео.

<script type="text/javascript"> 

    $(document).ready(function() { 
     $('#fullpage').fullpage({ 
      verticalCentered: true, 
      fitToSection: true, 
      controlArrows: false, 
      afterRender: function(){ 
       //playing the video 
       $('video').get(0).play(); 
      }, 
      afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){ 
       $('#myVideo').prop('muted', false) 
      }, 
     }); 
    }); 

</script> 

<div id="fullpage"> 
    <div class="section" id="section1"> 

     <div class="slide" id="slide1"> 
      <video autoplay loop muted id="myVideo"> 
       <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
       <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> 
      </video> 
     </div> 

     <div class="slide" id="slide2"> 
      <video autoplay loop muted id="myVideo2"> 
       <source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm"> 
       <source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4"> 
      </video> 
     </div> 

    </div> 
</div> 

ответ

1

С docs, я думаю, что вы можете использовать onLeave() обратного вызова:

$('#fullpage').fullpage({ 
    onLeave: function(index, nextIndex, direction){ 
     // mute video from last slide 
     $('video').eq(index-1)[0].muted = true; 
     // unmute video from current slide 
     $('video').eq(nextIndex-1)[0].muted = false; 
    }, 
}); 

Интересно начинается индекс на 1, так что вам придется использовать index-1.

Смежные вопросы