Problemas para ver vídeo web en iPad, iPhone...
3 seguidores
Hola a tod@s...
He insertado unos vídeos en una web y no consigo que se vean ni en iPhone ni en ipad ni en android, en ningún dispositivo portátil a pesar de tener el formato (o eso creo) adecuado, según he leído por ahí mp4.
convertí a partir de un quicktime a mp4 con un software precisamente para hacerlo para esos dispositivos...
Los he insertado con la etiqueta <video> y varios <source> para ogv, webm, mp4 , fly y mov....
Los veo en todos los navegadores tanto en Mac y PC pero no en ipad, iPhone ni android...
algún formato se me escapa?... Quizás algún método de inserción diferente?
Alguien puede arrojar algo de luz sobre esto?
Gracias!
Alo
De momento he encontrado esto...
http://diveintohtml5.info/video.html
Tiene pinta de ser una Biblia de todo esto...
Usuario desconocido
CREO que pasé por ésto, conviértelos con Handbrake. ¿La diferencia entre hacerlo con este programa y con otro software? NPI, pero en su momento fue el único que me solucionó el problema.
Te dejo una ayuda por aquí.
Saludos y suerte.
Ander
¿Podrías pegar el código que usas para insertar el vídeo? ¿Con que programas realizas la conversión?
Te copio un ejemplo muy simple de inserción de vídeo:
<video >
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
</video>
Alo
Claro!..
<video controls="controls" width="760" poster="”templates/cromatika/video/calmaven01.jpg”">
<source src="templates/cromatika/video/calmaven.ogv" type="video/ogg" />
<source src="templates/cromatika/video/calmaven.webm" type="video/webm" /><source src="templates/cromatika/video/calmaven.mp4" type="video/mp4" />
<embed src="templates/cromatika/video/calmaven.swf" type="application/x-shockwave-flash" width="760" height=""></embed>
</video>
La etiqueta <embed> se supone que es para navegadores IE mas antiguos... espero que esa no sea la raiz de mi problema...
Gracias!!!
Alo
Alejandro, ya utilizé Handbrake para convertir a mp4 pero no se soluciona.... decir que al abrir con iphone se ve el recuadro del video de color negro y no carga nada...
En el link que he puesto al principio he leido algo de poner el source de mp4 en primer lugar pero tampoco funciona...
Alo
Y otra cosa curiosa.....
Los videos se abren en un popup al pulsar en una imagen de la web, curiosamente en safari el popup se abre mas grande a pesar de haberle dado tamaño al con css y muestra el video una vez cargado... cerrando ese popup y volviendolo a abrir ya aparece a su tamaño... al parecer deforma el popup hasta que se ha cargado en memoria, después todo bien... cosas raras....
samuelvgm
La página que estás probando por un casual no estará en HTTPS o detrás de un control de usuarios via .htaccess, 'quicir', que tengas que loguearte para verla.
Alo
samuelvgm
no, estan bajo http, nada de loguearse...
samuelvgm
¿Entonces la página está abierta al público?.
¿Has probado en Firefox para Android?
Te lo comento porque hay una limitación técnica en los navegadores móviles (excepto Firefox para Android) y es que no cargan contenidos multimedia a través de SSL.
Más info:
http://stackoverflow.com/questions/9942365/html5-audio-wont-play-on-mobile-devices
Ander
He probado el código que has pasado con tu vídeo y a mi se me reproduce bien en el iPhone, así que sospecho que el problema viene por otro lado y no por el código o codificación de los vídeos.
Alo
Vaclad, ya he conseguido que me funcione, y se ve en iphone... con este código:
<video controls="controls" width="760" height="428" poster="templates/cromatika/video/calmaven01.jpg">
<source src="templates/cromatika/video/calmaven.mp4" type="video/mp4" />
<source src="templates/cromatika/video/calmaven.ogv" type="video/ogg" />
<source src="templates/cromatika/video/calmaven.webm" type="video/webm" />
<embed src="templates/cromatika/video/calmaven.swf" type="application/x-shockwave-flash" width="760" height="428"></embed>
</video>
para que el video se adapte al tamaño de la pantalla del iphone utilizo...
video{
width:100%;
}
así cambia el tamaño del video al escalar la ventana pero da la sensación de que del reproductor que lo contiene no cambia de tamaño... así que me deforma el popup... si no es por una cosa es por la otra.... :(
Ander
Para hacer el vídeo responsive yo suelo usar esta técnica. Tienes que meter el vídeo dentro de un div (en el ejemplo #contenedor) y aplicarle estos estilos CSS:
#contenedor {
height:0;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
position:relative;
}
#contenedor video{
height: 100%;
left:0;
position: absolute;
top: 0;
width:100%;
}
De esta forma el vídeo es responsive y mantiene el aspecto 16:9. Mira a ver si esto te ayuda con el problema que tienes.