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

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();
    }
  }
});

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

$('#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();
    }
  }
});

.section {
  text-align: center;
}

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

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

How to restart autoplay audio / video after leave slider

javascript

jquery

html

fullpage.js