1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    27
    Vote Rating
    1
    Answers
    2
    English is on a distinguished road

      0  

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

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    27
    Vote Rating
    1
    Answers
    2
    English is on a distinguished road

      0  

    Default


    That worked! Thank you so much.

Thread Participants: 1

Tags for this Thread