Ext.Video on Android

[toe]

Hello,
I am trying to get video to work using the Ext.Video class. I was trying get the example from demos to work and it works fine using my iPhone, and in Safari and Chrome browsers. However, I can not get it to respond at all using my Android. I am using the 0.9.3 framework.

This is the code from the example video. This does not respond at all in my Android. Any help would be greatly appreciated.

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
        var pnl = new Ext.Panel({
            layout: {
                type: 'vbox',
                pack: 'center'
            },
            items: [{
                xtype: 'video',
                url: 'space.mp4',
                loop: true,
                width: 500,
                height: 400,
                poster: 'Screenshot.png'
            }],
            fullscreen: true
        })
    }
});

Thank you.

[toe]

Hey folks,

I worked on this some more and found a great link http://www.broken-links.com/2010/07/...ndroid-phones/

It explained how to get HTML5 video working on the Android. So I tested it and it worked on his example. So I started to figure out how to make it work in Sencha Touch and go it just now. Since this kicked my butt I thought that I may not be the only one, so here is what I did.

Disclaimer: I am developing an Android App so I have not tested this with the iPhone, but since the native video class works for iPhone I am sure that you can test to see which device is being used and deploy the needed stuff to make it happen.

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
    
        var vidTmp = new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="container">',
                    '<div>{title}</div>',
                    '<video id="video{id}" autobuffer width="100" height="90" poster="bbb_poster-360x240.jpg" >',
                        '<source src="{url}">',
                    '</video>',
                '</div>',
            '</tpl>'
        );
        
         Ext.regModel('Video', {
            fields: ['title', 'url', 'id']
        });
        
        var videos = new Ext.data.Store({
                model: 'Video',
                sorters: 'title',
                
                getGroupString : function(record) {
                    return record.get('title')[0];
                },
                
                data: [
                    {title: 'Big Buck', url: 'BigBuck.m4v', id:'1'}, 
                    {title: 'Big Buck 2', url: 'BigBuck.m4v', id:'2'},
                    {title: 'Big Buck 3', url: 'BigBuck.m4v', id:'3'}
                ]
            });
        
        var pnl = new Ext.DataView({
            title: 'Video',
            store: videos,
            tpl: vidTmp,
            itemSelector:'.container',
            listeners: {
                itemtap: function(view,index,el,e) {
                    rec = videos.getAt(index);
                    video = document.getElementById('video'+rec.data.id);
                      video.play();
                    
                }
            },
            fullscreen: true
        })
    }
});

[evant]

Touch uses the native video tag, if you have a look at the source that's pretty much exactly what it does.

[toe]

That is what I thought, but every time I tried the example it never worked. I may be my device, but this was the only way I could get it to work for me.

I am just happy it is working. Everywhere I look I read how the Android does not do a good job of supporting HTML5 video.

[gkatz]

so apperantly android (or at least the galaxy S version of it) does not play nice with Ext.Video.
even the kitchen sink media examples would not run on it.

what is the status of this? any new info? anyone succesfully used Ext.video on android and wants to share?

thanks in advance

[steve1964]

I've developed an app with Sencha and Phonegap, video for android must be encoded with the moov atom at the beginning in order to be streamed, i have encoded the videos with ffmpeg and qt-faststart (move the moov atom at the beginning) server side. Video ancoded in this way will be played in native video player of Android (once the video finish playing the native player close) so if you use ext.video you have to tap on the trailer in order to play video (in native player). The problem is that Android browser till version 2.2.1 (i've not yet tryed it on 2.3 and 3.0) do not support html5 video and audio tag. I suggest to read the android supported media formats:
http://developer.android.com/guide/a...a-formats.html

[gkatz]

@steve
r u saying the sencha kitchen sink media exmaple of the video is not encoded for android and thus cannot be displayed? did sencha dev team overlooked this?.

[steve1964]

The kitchen sink never worked for me on android (Galaxy Tab 2.2, Samsung gt9003 2.2.1), no video and no audio.

[suzzer99]

Kithcen sink doesn't work for me either on Droid X - 2.2. It seems like it wants to start but I just see the "piece of film" icon instead.

[thomas__james]

Hi everyone, I have been developing with Sencha Touch for about 3 weeks and I have not yet been able to find a way to play video on Android with Sencha Touch - the closest to a solution seems to be the above but I am having trouble in adapting it.

Would it be possible to adapt the code above to work with a fairly generic template for instance:

ToolbarDemo.views.Aboutcard = Ext.extend(Ext.Carousel, {
id: 'a',
styleHtmlContent: true,

items: [

{cls: 'image cardfronta'},
{cls: 'image cardbacka'}

//VIDEO

]
});

Ext.reg('a', ToolbarDemo.views.Aboutcard);

Many thanks,

- Tom