Как я могу вставлять видео в приложение Sencha Touch?

Я работаю над приложением Sencha Touch ipad, которое извлекает контент из канала JSON. JSON содержит некоторые изображения, а также несколько URL-адресов видео от Youtube и Vimeo.

Где начать играть в встроенное видео в приложении?

ОТВЕТЫ

Ответ 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"  
}]

Чтобы вставлять видео Youtube и Vimeo в Sencha Touch, вы должны использовать код вставки 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>';}  
                }    
            }  
        }  
    }  
)

В целом этот метод работал отлично, хотя у нас были некоторые проблемы с загрузкой видео в буферизованной карусели (тема для другого вопроса).