Ipad 如何在Sencha Touch应用程序中嵌入视频？

我正在开发一个SenchaTouch ipad应用程序，它从JSON提要中提取内容。JSON包含一些图像，以及来自Youtube和Vimeo的一些视频URL

---

我从哪里开始尝试在应用程序中播放嵌入式视频？

您可以通过查看Sencha Touch Kitchensink:Media>视频示例开始

---

从我最初的问题开始的几周后，我有一些关于这个话题的提示要分享

我们已经构建了一个与Sencha Touch演示应用非常相似的应用程序。一个不同之处是，我们希望显示JSON提要中引用的视频和图像

对于单个媒体项，我们的JSON看起来像这样，可以是

image

或

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"  
}]

为了在Sencha Touch中嵌入Youtube和Vimeo视频，您必须使用这两个站点提供的iframe嵌入代码。以下XTemplate将正确的

video\u id

插入到相关的嵌入代码中，具体取决于视频的宿主位置

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>';}  
                }    
            }  
        }  
    }  
)

tpl:new Ext.XTemplate（
“{[this.renderMedia（values）]}”，
{
renderMedia:函数（媒体）{
if（媒体视频）{
如果（media.video_host=='vimeo'）{
返回“”；
}否则{
返回“”；}
}    
}  
}  
}  
)

---

总的来说，这种方法工作得很好，尽管我们在将视频加载到缓冲传送带（另一个问题的主题）时遇到了一些问题。

感谢herkulano-这是我的出发点，但它只适合本地托管视频，不是从第三方网站嵌入的视频。您能举例说明如何使用XTemplate和Panel吗？