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

【问题标题】：Delay the autoplay of video in fullpage.js延迟 fullpage.js 中视频的自动播放
【发布时间】：2023-04-08 01:58:01
【问题描述】：

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

在标签中我实际上使用了 data-src（用于延迟加载）和自动播放

【问题讨论】：

【解决方案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" 使上面的代码正常工作。

【讨论】：

我无法让它工作：\ 视频根本无法启动...我尝试删除 data-src，删除自动播放没有任何效果。

【解决方案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>

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

【讨论】：