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

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

Answer 2

您可以先查看Sencha Touch Kitchensink：Media＆gt;视频示例

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

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

2 个答案: