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

发布于 2024-10-06 12:50:42 字数 130 浏览 3 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烂柯人 2024-10-13 12:50:42

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

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

对于单个媒体项目，我们的 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&portrait=0&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>';}  
                }    
            }  
        }  
    }  
)

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

A few weeks on from my original question, I have a few tips to share on this topic.

We've built an app quite similar to the Sencha Touch demo app Touchstyle. One difference was we wanted to display videos as well as images referenced in our JSON feed.

Our JSON looks something like this for a single item of media, which could be of type image or 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"  
}]

In order to embed Youtube and Vimeo videos in Sencha Touch, you have to use the iframe embed code that both sites provide. The following XTemplate inserts the correct video_id into the relevant embed code, depending on where the video is hosted.

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&portrait=0&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>';}  
                }    
            }  
        }  
    }  
)

By and large this method has worked fine, although we did experience some problems to do with loading video in a buffered carousel (a topic for another question).

回复收藏 0 原文