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

Question

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

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

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

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