Results 1 to 3 of 3

Thread: Ext.Video Plays audio but no video until the video is clicked.

  1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    27
    Answers
    2
    Vote Rating
    2
      0  

    Default Answered: Ext.Video Plays audio but no video until the video is clicked.

    I'm trying to display a video when a user clicks a button. The issue I'm having is that, although the audio plays successfully, you cannot see the video component (you just get a black screen), until you click on the video itself. At this point, the video displays.

    I have seen this issue mentioned a couple of times on the Internet, but I haven't seen one answered yet.

    Code:
    Ext.define('TestVideo.view.Main', {    extend: 'Ext.Container',
        xtype: 'main',
        requires: [
          'Ext.TitleBar',
          'Ext.Video'
        ],
        config: {
            items: [
                {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Test Video'
                },
                {
                    xtype: 'video',
                    url: 'BigBuck.m4v',
                    //posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg',
                    height: '500px',
                    id: 'video'
                },
                {
                    xtype: 'button',
                    text: 'Play',
                    listeners: {
                        tap: function(){
                            this.parent.down('video').media.dom.load(); //This line doesn't make any difference.
                            this.parent.down('video').play();
                        }
                    }
                }
            ]
        }
    });

  2. See if this Video subclass helps you:

    Code:
    Ext.define('MyVideo', {
        extend : 'Ext.Video',
        xtype  : 'myvideo',
    
        //hides poster, shows media
        onPlay : function() {
            this.callParent(arguments);
    
            if (!this.isInlineVideo) {
                this.ghost.hide();
                this.media.show();
            }
        },
    
        //hides media, shows poster
        onEnd : function() {
            this.callParent(arguments);
    
            if (!this.isInlineVideo) {
                this.media.hide();
                this.ghost.show();
            }
        }
    });

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      1  

    Default

    See if this Video subclass helps you:

    Code:
    Ext.define('MyVideo', {
        extend : 'Ext.Video',
        xtype  : 'myvideo',
    
        //hides poster, shows media
        onPlay : function() {
            this.callParent(arguments);
    
            if (!this.isInlineVideo) {
                this.ghost.hide();
                this.media.show();
            }
        },
    
        //hides media, shows poster
        onEnd : function() {
            this.callParent(arguments);
    
            if (!this.isInlineVideo) {
                this.media.hide();
                this.ghost.show();
            }
        }
    });
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    27
    Answers
    2
    Vote Rating
    2
      0  

    Default

    That worked! Thank you so much.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •