如何在我的 Sencha Touch 应用程序中嵌入视频？答案

【问题标题】：How can I embed video in my Sencha Touch app?如何在我的 Sencha Touch 应用程序中嵌入视频？
【发布时间】：2011-05-22 10:17:31
【问题描述】：

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

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

【问题讨论】：

标签： ipad video html html5-video sencha-touch

【解决方案1】：

在我最初提出问题几周后，我有一些关于这个主题的提示要分享。

我们已经构建了一个与 Sencha Touch 演示应用程序Touchstyle 非常相似的应用程序。一个区别是我们想要显示视频以及我们的 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_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>';}  
                }    
            }  
        }  
    }  
)

总的来说，这种方法运行良好，尽管我们在缓冲轮播中加载视频时确实遇到了一些问题（另一个问题的主题）。

【讨论】：

您能否举例说明如何将 XTemplate 与 Panel 一起使用？

【解决方案2】：

您可以从 Sencha Touch Kitchensink 开始：媒体 > 视频示例

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

【讨论】：

感谢 herkulano - 这是我的出发点，但它仅适用于本地托管的视频，而不适用于从 3rd 方网站嵌入的视频。