He usado svelte para construir un sitio web.

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

Después de construir e implementar el sitio web en línea

El video de fondo no comienza a reproducirse automáticamente

Encontré esta respuesta aquí

 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

Algunos otros sugirieron incluir autoplay muted Playsinline que ya está hecha, pero aún enfrentan el mismo problema

Uno ha sugerido aquí convertir el enlace de video .mp4 a BLOB en javascript como este

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

Ya he muted la autoplay Playsinline sigue teniendo el mismo problema

Aquí está el enlace del video que puedes probar en Safari en tu iPhone

¿Cómo puede convertir un archivo en un svelte de manera similar a lo que el usuario sugirió como solución?

¿Hay alguna otra manera de resolver el problema?