10

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

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

4

2 回答 2

11

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

我们已经构建了一个与 Sencha Touch 演示应用Touchstyle非常相似的应用。一个区别是我们想要显示视频以及我们的 JSON 提要中引用的图像。

对于单个媒体项，我们的 JSON 看起来像这样，它可以是 typeimage或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>';}  
                }    
            }  
        }  
    }  
)

总的来说，这种方法效果很好，尽管我们确实遇到了一些与在缓冲轮播中加载视频有关的问题（另一个问题的主题）。

于 2011-01-03T13:16:23.220 回答
0

您可以先查看 Sencha Touch Kitchensink：媒体 > 视频示例

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

于 2011-01-01T20:36:11.563 回答