How can I embed video in my Sencha Touch app?

Question

I'm working on a Sencha Touch ipad app which pulls content from a JSON feed. The JSON contains some images, plus some video URLs from Youtube and Vimeo.

Where do I start trying to play embedded video in the app?

Solution

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

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).