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