加载页面后使用 Javascript 更改视频 src 在 Safari 中不起作用

Question

您好，我正在尝试提高我网站的页面速度，并且我有一个 8mb 的自动播放视频。

我一直在考虑在页面加载后加载视频。我设法开始在 chrome、firefox 等中工作，但不能在某些版本的 Safari 上工作。

有些版本我只看到海报图片和播放按钮

下面是html

<video id="video" class="settings-video-background" loop="" muted="" autoplay="" playsinline="" poster = "/airline_software_masthead-video_poster_home_2.jpg">
<source src="" type="video/mp4">
Your browser does not support the video tag.
</video>
 ``

这是js代码=====

window.addEventListener("load", () => { console.log("加载");

async function setupVideo() {
   console.log('setupVideo function');

     const video = document.getElementById('video');
     video.src = 'video__h264_high-bitrate-2-86mb_blue_20_12.mp4';

    console.log(video.src);
        video.load();
    video.play();
    return video;
}
 setTimeout(()=>{
setupVideo(); 
},3000);

});`

`

Answer 1

似乎问题是window.addEventListener("load")不完整的支持，下面似乎火了。

if (document.readyState === 'complete') {
 setupVideo();
  } else {
  window.addEventListener('load', setupVideo);
 }