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?Comment intégrer de la vidéo dans mon application Sencha Touch?
Répondre
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&portrait=0&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).
Vous pouvez commencer par regarder dans le Sencha tactile KitchenSink: Média> Vidéo Exemple
Merci herkulano - c'était mon point de départ, mais il ne prend en charge que la vidéo hébergée localement, pas la vidéo intégrée à partir d'un site tiers. – strangerpixel
Pourriez-vous montrer un exemple d'utilisation de XTemplate avec Panel? – romaninsh