Search code examples
javascriptsafarimobile-safarisvelte

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

I have used svelte to build a website.

<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>

After building and deploying the website online

The background video doesn't start playing automatically

Found this answer here

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

Some others suggested to include muted autoplay Playsinline which is already done, but still face the same issue

One has suggested here to converting .mp4 video link to BLOB in javascript like this

 <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>

Already have muted autoplay Playsinline still same issue

Here's the video link you can test on safari on your iPhone

How can a convert a file into blob in svelte similar what the user suggested as a solution?

Is there any other way to solve the issue?

Solution

  • The video is encoded by AV1 which is not supported by Safari, the entire Apple ecosystem and Firefox on Android.

    source: https://www.lambdatest.com/web-technologies/av1-support-on-safari-15