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

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