延迟fullpage.js视频的自动播放

Question

我在寻找一种方式使用fullpage.js

在标签我其实是用数据-SRC（用于延迟加载）和自动播放

耽误自动播放

Answer 1

SOLUTION

HTML

<video id ="video_intro" width="XXX" height="XXX" poster=".../poster.svg"> 
<source data-src=".../video.webm" type="video/webm"> 
<source data-src=".../video.mp4" type="video/mp4"> 
</video> 

JS

afterLoad: function(anchorLink, index){ 
     var video = document.getElementById("video_intro"); 
     video.addEventListener("canplay", function() { 
      setTimeout(function() { 
      video.play(); 
      }, 2000); 
     }); 
} 

Answer 2

只需使用回调afterLoad即可自己动手。然后添加的setTimeout或类似：

afterLoad: function(anchorLink, index){ 
    setTimeout(function(){ 
     //playing HTML5 media elements 
     $(this).find('video, audio').each(function(){ 
      var element = $(this).get(0); 

      if(element.hasAttribute('data-myautoplay') && typeof element.play === 'function') { 
       element.play(); 
      } 
     }); 
    }, 2000); //2 seconds delay 
}, 

当然，你必须停止使用fullpage.js自动播放功能，所以请从您的视频autoplay财产。上面的代码使用data-myautoplay="true"工作。