2010-06-15 15 views
9

Estoy tratando de insertar un video en HTML usando jQuery para iPad, pero todo lo que veo es una pantalla negra. Si agrego la etiqueta de video directamente a la página HTML, todo parece funcionar bien.Insertar video HTML5 usando JavaScript para iPad

Esto es lo que tengo en mi JavaScript y lo llamo usando una función para evento onClick.

var html = ""; 
html += '<video id="someVideo" width="'+settings.width+'" height="'+settings.height+'" controls="controls">'; 
html += '<source src="'+url+'" type="video/mp4" />'; 
html += '</video>'; 
$("#videoDiv").html(html); 

Si creo un derecho etiqueta de vídeo en el interior del cuerpo todo parece estar funcionando bien

<video width=708px height=300px controls="controls"><source src="video.mp4" type="video/mp4"></video> 

La razón por la que estoy planeando un JavaScript es que tengo unos videos en la misma página y quería que el al usuario seleccionar un vídeo para ser visto como se oponen a un solo vídeo en una página ... ¿Alguna idea en torno a que también ayudará a

Cualquier ayuda será muy apreciada Gracias

Respuesta

0

La razón por la que estoy planeando un JavaScript es que tengo algunos videos en la misma página y quería que el usuario seleccione un video para ser visto como se oponen a un solo vídeo en una página ... ¿Alguna idea alrededor de eso también ayudará

Coloque todos los videos en la página, cada uno con un estilo "display: none". Luego, muestre() el div apropiado en el evento click.

+0

Será este prevenir todos los vídeos de precaching? – syockit

19

Hay un error en el kit web del iPad que impide que los elementos de video creados dinámicamente se carguen correctamente.

Para evitar esto establecer el atributo de origen y llamar al método de carga de elementos de vídeo después de haber establecido el html

var html = ""; 
html += '<video id="someVideo" width="'+settings.width+'" height="'+settings.height+'" controls="controls">'; 
html += '<source src="'+url+'" type="video/mp4" />'; 
html += '</video>'; 
$("#videoDiv").html(html); 

$('#someVideo').attr('src', url); 
$('#someVideo')[0].load(); 
+0

Esto funcionó como un regalo. Gracias ampt. – Sasha

+0

Awesome possum! Trabajos. – Tudorizer

+0

¡Muchas gracias! Algo más corto y más genérico, terminé haciendo esto: '$ ('video'). Each (function() { var el = $ (this) [0]; $ (this) .replaceWith (el.outerHTML) ; el.load(); }); '- parece lograr el mismo efecto –

2

ampts Re Respuesta: Por favor tenga en cuenta llamando carga() en el elemento de vídeo sólo funciona si su el código se desencadena por una acción del usuario, como un controlador de clic.

Para mí esto no funcionó, ya que Apple no parece pensar que el controlador de historial (cambio de hash) es un controlador desencadenado por el usuario.

Para más detalles see apples documentation on javascript and the video element