背景视频无法在 safari 浏览器上自动播放使用 svelte 构建网站

Question

我用svelte建了一个网站

<script lang="ts">
  import { MetaTags } from 'svelte-meta-tags';
  import Viewport from 'svelte-viewport-info'
  import vi from './assets/videofile.mp4'
  import posterimg from './assets/PosterImage.png'
</script>
<main>
  <video
  autoplay 
  muted 
  loop
  Playsinline
  src={vi}
  poster={posterimg}>
  </video>
</main>
<style>
video 
{
  width: 100%;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
</style>

在线构建和部署网站后

背景视频没有自动开始播放

找到这个答案

Safari doesn't allow autoplay of video on these 2 scenarios

    1. when "muted" config not set
    2. when iphone is in battery saving mode or in low battery

其他一些人建议包括 muted autoplay Playsinline 这已经完成了，但仍然面临同样的问题

有人建议将 .mp4 视频 link 转换为 javascript 中的 BLOB 像这样

 <video id="ForcePlay" width="500px" height="500px" muted playsinline controls> 
    <source src="url path to your video file" type="video/mp4">
 </video>

<script type="text/javascript">
  function makeURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) :    
    window.webkitURL.createObjectURL(object);
  }

  async function display(videoStream){
    var myvideo = document.getElementById('ForcePlay');
    let blob = await fetch(videoStream).then(r => r.blob());
    var videoUrl= makeURL(blob);
    myvideo.src = videoUrl;
  }

  display('url path to your video file');
</script>

已经有mutedautoplayPlaysinline还是一样的问题

这是视频 link 您可以在您的 iPhone

上测试 safari

如何将文件转换为 blob svelte 类似于用户建议的解决方案？

还有其他方法可以解决这个问题吗？

Answer 1

视频由 AV1 编码，Safari 整个苹果生态系统和 Android Firefox source

不支持该视频

背景视频无法在 safari 浏览器上自动播放使用 svelte 构建网站

Background video not auto playing on safari browser used svelte to build the website

javascript

safari

mobile-safari

svelte