3

Estoy levantando una web con video de fondo en formato mp4. Estoy en el proceso de convertirlo a webM para ver si logro hacer que se reprodusca en navegadores de dispositivos móviles y es que funciona en chrome firefox y hasta internet explorer de PCs pero hasta ahora en ningun dispositivo móvil. Será el problema que solo tengo un video en formato mp4? o hay algo que no estoy haciendo bien. Aqui el codigo y ojala puedan ayudarme.

var video = document.getElementById('video'),
	clase_video = document.getElementsByClassName('video')[0],
	height = window.innerHeight;
	function ajustar() {
	 	clase_video.style.minHeight = height + "px";
		video.style.minHeight = height + "px";
		if(window.innerWidth < 510){
			video.style.height = height + "px";
		}
	}
	ajustar();
.video{
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:rgba(0,0,0,0.6);
	z-index:1;
}
video{
	width:100%;
	min-width:1200px;
	top:0;
	left:0;
	z-index:0;
	position:fixed;
}
<body>
	<div class="body" style="margin-bottom:-1.3em;">
		<video id="video" autoplay="autoplay">
        	<source src="video/bachata.mp4" />
            <source src="video/bachata.ogg" />
            <source src="video/bachata.webm" />
        </video>
      </div>
</body>

Si desean ver la web final pueden ingresar a www.rumbalatinaperu.com. Espero puedan ayudarme.

2
  • Hola Mike, el formato del archivo (mp4) es importante, pero igual pasa con los codecs; si encodeas el video como H.264 y el audio como AAC no deberías tener problemas en ninguno de los dispositivos movies. Te recomiendo que veas la herramienta FFMPEG la cual puedes usar para reconvertir cualquier video e incluso puedes convertirlo a HLS o DASH y hacer tu video de ancho de banda adaptable y de carga inmediata. Commented el 21 jun. 2016 a las 10:26
  • Gracias por responder. Muy agradecido y la herramienta esta muy buena. Yo estaba usando adobe media encoder pero probare esta ya que me la recomiendas. Finalmente me parece que los dispositivos moviles no reproducen automaticamente los videos por el tema de uso de datos. Asi que no me queda de otra que poner una imagen de fondo para moviles no mas :/. Un saludo cordial.
    – Mike
    Commented el 23 jun. 2016 a las 4:13

2 respuestas 2

3

Parece ser que en html5 hay muchos teléfonos que no tienen compatibilidad con mp4; para resolverlo en este post comentan que:

  • No usar el atributo type
  • Llamar manualmente a play() con javascript
  • Intentar evitar los .mp4 ya que algunos dan problemas.

El código utilizado es:

<video id="video" autobuffer height="240" width="360">
<source src="BigBuck.m4v">
<source src="BigBuck.webm" type="video/webm">
<source src="BigBuck.theora.ogv" type="video/ogg">
</video>

Y sería necesario llamar al play:

var video = document.getElementById('video');
video.addEventListener('click',function(){
  video.play();
},false);
3
  • Lo probare ahora mismo a ver que resulta, luego te comento a ver que sucedió. Saludos
    – Mike
    Commented el 23 jun. 2016 a las 4:14
  • @Mike te resultó? de ser así, acepta la respuesta y colabora para que la salud del sitio se mantenga (% de respuestas aceptadas) Saludos
    – fredyfx
    Commented el 2 nov. 2016 a las 17:14
  • @fredyfx Si lo probe hace unos meses y me funciono correctamente en celulare pero CON WIFI pork los telefonos con servicio via señal telefonica directa no loe permiten y talve sea para ahorrar costo en datos innecesarios. Pero bueno eso es algo que no se puede manejar. Gracias a todos potr sus apreciables respuestas.
    – Mike
    Commented el 12 nov. 2016 a las 14:12
0

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

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

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.