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

Question

我正在寻找一种使用 fullpage.js

延迟自动播放的方法

在标签中我实际上使用了数据源（用于延迟加载）和自动播放

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

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

Delay the autoplay of video in fullpage.js

video

autoplay

fullpage.js