Tengo un sitio web con un video de fondo. Muchos navegadores, especialmente los móviles, no admiten la reproducción automática incluso con videos silenciados. ¿Cómo puedo detectar si el navegador no admite la reproducción automática y reemplazar el video con una imagen? Estoy usando vueJS.
<video autoplay class="background-video" loop muted> <source src="@/assets/video/background.mp4" type="video/mp4"> </video>
Usa el atributo poster :
<video width="620" loop muted poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg" > <source src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4" type="video/mp4"> <source src="https://archive.org/download/ElephantsDream/ed_hd.ogv" type="video/ogg"> <source src="https://archive.org/download/ElephantsDream/ed_hd.avi" type="video/avi"> </video>Agregue el atributo de reproducción en línea para que su video se reproduzca automáticamente en iOS.
(La mayoría de los navegadores admiten la reproducción automática, siempre que también use silenciado).