¿Cómo puedo incrustar video en mi aplicación Sencha Touch?

Question

Estoy trabajando en una aplicación de iPad Sencha Touch que extrae contenido de un feed JSON. El JSON contiene algunas imágenes, además de algunas URL de video de Youtube y Vimeo.

¿Por dónde empiezo a intentar reproducir video incrustado en la aplicación?

Answer 1

unas semanas desde mi pregunta original, tengo un par de consejos para compartir sobre este tema.

Hemos creado una aplicación bastante similar a la aplicación de demostración Sencha Touch Touchstyle. Una diferencia fue que queríamos mostrar los videos, así como las imágenes a las que se hace referencia en nuestro feed JSON.

Nuestra JSON se ve algo como esto para un solo elemento de los medios de comunicación, que podría ser de tipo image o video:

"Media": [{ 
    "id":"28542", 
    "title":"mirrortrackmovie", 
    "type":"video", 
    "thumb":"http:\/\/i.ytimg.com\/vi\/X-z3_-7pwZ0\/default.jpg", 
    "video_host":"youtube", 
    "video_id":"X-z3_-7pwZ0", 
    "video":"http:\/\/www.youtube.com\/v\/X-z3_-7pwZ0" 
}] 

el fin de integrar Youtube y Vimeo en Sencha Touch, usted tiene que utilizar el iframe incrusta el código que ambos sitios proporcionan. La siguiente plantilla XTemplate inserta el video_id correcto en el código de inserción correspondiente, dependiendo de dónde se aloja el video.

tpl: new Ext.XTemplate( 
    '{[this.renderMedia(values)]}', 
    { 
     renderMedia: function(media) { 
      if (media.video) {        
       if (media.video_host == 'vimeo') { 
        return '<div class="video vimeo"><iframe class="vimeo-player" type="text/html" width="640" height="385" src="http://player.vimeo.com/video/'+media.video_id+'?byline=0&amp;portrait=0&amp;color=ffffff" frameborder="0"></iframe></div>'; 
       } else { 
        return '<div class="video youtube"><iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/'+media.video_id+'" frameborder="0"></iframe></div>';} 
       }  
      } 
     } 
    } 
) 

En general este método ha funcionado bien, aunque nos hizo experimentar algunos problemas que ver con el vídeo de carga en un carrusel buffer (un tema para otra cuestión).

Answer 2

Puedes empezar por mirar en el Sencha Touch KitchenSink: Medios> Ejemplo de vídeo

http://dev.sencha.com/deploy/touch/examples/kitchensink/