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

Question

我正在寻找一种方法来使用fullpage.js延迟自动播放

在标签中我真的使用data-src（用于延迟加载）和自动播放

Answer 1

使用回调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"可以使上面的代码生效。

Answer 2

<强>解

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