2

Quiero reproducir un video utilizo html5 para cargarlo en mi documento, en el navegador de escritorio todo va bien incluso he utilizado otro formatos y no tengo ningun problema pero el tratar de reproducirlo en moviles solo carga como un segundo y se queda detenido. Si añado la propiedad controls si puedo reproducirlo pero al presionar el boton de play me lo lanza en una nueva pantalla cosa que no busco quiero que se reproduzca en el mismo plano de toda mi pagina web.

<div class="video-background-container">
        <video id="video " preload="auto" autoplay loop muted class="video-background">
            <source type="video/mp4" src="videos/prueba-video.mp4"/>
        </video>
    </div> 

este es el html que uso algo muy basico, añado los atributos autoplay por que como lo mencione necesito que en cuanto se cargue la pagina en el navegador también se cargue el video, lei por ahí que la propiedad muted era necesario en navegadores móviles al tratar de reproducir un video con html 5. podrían ayudarme.

1 respuesta 1

2

Si, es necesario que el video no tenga sonido o que esté "muteado", y aparte debes agregar el atributo playsinline, o con el prefijo webkit-playsinline para mayor soporte en OS antiguos. En el blog de Webkit podrás leer mas al respecto (En inglés)

El código:

<div class="video-background-container">
    <video id="video " preload="auto" autoplay loop muted class="video-background" webkit-playsinline playsinline>
        <source type="video/mp4" src="path/al/video.mp4"/>
    </video>
</div>

Probado en Safari para iOS, y Firefox para iOS, con iOS 11.2

1
  • Ha funcionado perfectamente amigo. Gracias por tu ayuda.
    – luis_am92
    Commented el 9 feb. 2018 a las 19:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.