Comment intégrer de la vidéo dans mon application Sencha Touch?

Question

Je travaille sur une application iPad Sencha Touch qui tire le contenu d'un flux JSON. Le JSON contient des images, ainsi que des URL vidéo de Youtube et Vimeo. Où commencer à essayer de lire la vidéo intégrée dans l'application?

Answer 1

Quelques semaines de ma première question, j'ai quelques conseils à partager sur ce sujet.

Nous avons construit une application assez similaire à l'application de démonstration Sencha Touch Touchstyle. Une différence était que nous voulions afficher des vidéos ainsi que des images référencées dans notre flux JSON.

Notre JSON ressemble à quelque chose comme ça pour un seul élément des médias, ce qui pourrait être de type image ou 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" 
}] 

Afin d'incorporer des vidéos Youtube et Vimeo dans Sencha Touch, vous devez utiliser les iframe intègre le code fourni par les deux sites. Le XTemplate suivant insère le code video_id correct dans le code d'intégration approprié, en fonction de l'endroit où la vidéo est hébergée.

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 général, cette méthode a bien fonctionné, même si nous avons fait l'expérience de certains problèmes à voir avec le chargement vidéo dans un carrousel tampon (un sujet pour une autre question).

Answer 2

Vous pouvez commencer par regarder dans le Sencha tactile KitchenSink: Média> Vidéo Exemple

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