Sencha Touchアプリにビデオを埋め込むにはどうすればいいですか？

Question

私はJSONフィードからコンテンツを取り出すSencha Touch ipadアプリを開発しています。 JSONにはいくつかの画像とYoutubeとVimeoのビデオURLが含まれています。

どこで埋め込みビデオをアプリで再生しようとし始めますか？

Answer 1

数週間、私の元の質問からで、私はこのトピックを共有するためのいくつかのヒントを持っています。

私たちは、Sencha TouchデモアプリケーションTouchstyleと非常によく似たアプリを構築しました。 1つの違いは、JSONフィードで参照されている画像だけでなく、動画も表示することでした。

私たちのJSONがタイプimageまたはvideoのものであってもよいメディアの単一の項目、のために次のようになります。煎茶タッチでYouTubeやVimeoのビデオを埋め込むために

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

、あなたが使用する必要があります両方のサイトが提供する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

あなたは煎茶タッチKitchensinkを調べて起動することができます。メディア>ビデオ例

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