Question

我使用fullPage.js，我想知道你是否知道如何解决这个问题。我希望在离开滑块后重新启动自动播放，当你知道我的意思时，再来滑块再次启动新的视频/音频。

HTML：

<div class="slide">
   <video loop muted controls="false" data-autoplay>
     <source src="..." type="video/mp4">
     <source src="..." type="video/ogg">
   </video>
</div>
<div class="slide book-1">
   <audio controls="" data-autoplay>
     <source src="..." type="audio/ogg">
     <source src="..." type="audio/mpeg">
     Your browser does not support the audio element.
   </audio>
</div>

JavaScript的：

<script type="text/javascript">
$(document).ready(function() {
  $('#fullpage').fullpage({
  sectionsColor: ['#eee', '#fff'],
  anchors: ['firstPage', 'book-1']
   });
});
</script>

我期待着您的回复：）

谢谢，

肖恩。

Answer 1

您应该使用afterLoad回调。在此，您应该在加载后重新启动音频和视频元素。

代码看起来像这样：

$('#fullpage').fullpage({
  sectionsColor: ['red', 'green'],
  afterLoad: function(anchorLink, index) {
    if (index === 1) {
      let video = document.getElementById('video');
      video.load();
      video.play();
    }

    if (index === 2) {
      let audio = document.getElementById('sound');
      audio.currentTime = 0
      audio.play();
    }
  }
});

请参阅下面的完整工作示例。

＆＃13;

$('#fullpage').fullpage({
  sectionsColor: ['red', 'green'],
  afterLoad: function(anchorLink, index) {
    if (index === 1) {
      let video = document.getElementById('video');
      video.load();
      video.play();
    }

    if (index === 2) {
      let audio = document.getElementById('sound');
      audio.currentTime = 0
      audio.play();
    }
  }
});

＆＃13;

.section {
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet"/>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<div id="fullpage">
  <div class="section">
    <video id="video" loop muted controls="false" data-autoplay>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>
  </div>
  <div class="section">
    <div class="slide">
      <audio id='sound' controls="" data-autoplay>
        <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg"> Your browser does not support the audio element.
      </audio>
    </div>
    <div class="slide">Two 2</div>
  </div>

</div>

＆＃13;

如何在离开滑块后重新启动自动播放音频/视频

1 个答案: