1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    11
    Vote Rating
    0
    toe is on a distinguished road

      0  

    Default Ext.Video on Android

    Ext.Video on Android


    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.

    Code:
    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.

  2. #2
    Ext User
    Join Date
    Jul 2010
    Posts
    11
    Vote Rating
    0
    toe is on a distinguished road

      0  

    Default


    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.


    Code:
    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
            })
        }
    });

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,000
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Touch uses the native video tag, if you have a look at the source that's pretty much exactly what it does.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Ext User
    Join Date
    Jul 2010
    Posts
    11
    Vote Rating
    0
    toe is on a distinguished road

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Nov 2010
    Posts
    395
    Vote Rating
    6
    gkatz is on a distinguished road

      0  

    Default


    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

  6. #6
    Sencha User
    Join Date
    Aug 2010
    Posts
    303
    Vote Rating
    3
    steve1964 is on a distinguished road

      0  

    Default


    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

  7. #7
    Sencha User
    Join Date
    Nov 2010
    Posts
    395
    Vote Rating
    6
    gkatz is on a distinguished road

      0  

    Default


    @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?.

  8. #8
    Sencha User
    Join Date
    Aug 2010
    Posts
    303
    Vote Rating
    3
    steve1964 is on a distinguished road

      0  

    Default


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

  9. #9
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    80
    Vote Rating
    1
    suzzer99 is on a distinguished road

      0  

    Default


    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.

  10. #10
    Sencha User
    Join Date
    Nov 2011
    Posts
    6
    Vote Rating
    0
    thomas__james is on a distinguished road

      0  

    Default Generic Video Template

    Generic Video Template


    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

Similar Threads

  1. Ext.form.Select and Android
    By Tuscon in forum Sencha Touch 1.x: Bugs
    Replies: 3
    Last Post: 18 Aug 2011, 12:50 PM
  2. Ext Fx halts flash video playback during fade in
    By jmcdonald69124 in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 27 Jun 2010, 10:18 AM
  3. Ext.Map/Google Maps marker and android
    By apw in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 26 Jun 2010, 5:11 AM
  4. Will the EXT JS 4.0 get the video component?
    By aw1zard2 in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 18 May 2010, 8:31 AM
  5. Adding a You Tube video into an Ext Panel
    By pmruk in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 27 May 2009, 6:56 AM

Thread Participants: 5

Tags for this Thread