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

Question

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

С чего начать попытки воспроизведения встроенного видео в приложении?

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"  
}]

Чтобы встраивать видеоролики 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>';}  
                }    
            }  
        }  
    }  
)

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

Answer 2

Вы можете начать, заглянув в кухонную раковину Sencha Touch: Медиа> Пример видео

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