1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default HTML5 VideoPanel based on Xantus's blog posting.

    HTML5 VideoPanel based on Xantus's blog posting.


    It seemed easy after Dave (forum poster Xantus) showed the way, so...

    I took Dave's code and tweaked it to conform to recommendations about subclassing Ext Components: http://www.extjs.com/learn/Tutorial:...ew_UI_controls

    I also encapsulated the creation of a preview Tooltip within the class. The updating of the preview to create the appearance of a little moving video is provided by Ext.TaskMgr.

    Code:
    Ext.ns('Ext.ux');
     
    /* -NOTICE-
     * For HTML5 video to work, your server must
     * send the right content type, for more info see:
     * https://developer.mozilla.org/En/HTML/Element/Video
     */
    Ext.ux.HTML5VideoPanel = Ext.extend(Ext.Panel, {
    
        // Provide defaults for configurable tip sizes.
        tipWidth: 160,
        tipHeight: 96,
    
        autoHidePreview: false,
    
        constructor: function(config) {
            Ext.ux.HTML5VideoPanel.superclass.constructor.call(this, Ext.applyIf(config, {
                autoplay : false,
                controls : true,
                bodyStyle: 'background-color:#000;color:#fff',
                suggestChromeFrame: false
            }));
        },
    
        onRender: function() {
            var fallback = '';
         
            if (this.fallbackHTML) {
                fallback = this.fallbackHTML;
            } else {
                fallback = "Your browser doesn't support html5 video. ";
                
                if (Ext.isIE && this.suggestChromeFrame) {
                    /* chromeframe requires that your site have a special tag in the header
                     * see http://code.google.com/chrome/chromeframe/ for details
                     */
                    fallback += '<a>Get Google Chrome Frame for IE</a>';
                } else if (Ext.isChrome) {
                    fallback += '<a>Upgrade Chrome</a>';
                } else if (Ext.isGecko) {
                    fallback += '<a>Upgrade to Firefox 3.5</a>';
                } else {
                    fallback += '<a>Get Firefox 3.5</a>';
                }
            }
    
            // Configure the body element to be a <video> element
            this.bodyCfg = Ext.copyTo({
                tag   : 'video',
                children: []
            },
            this, 'poster,start,loopstart,loopend,playcount,autobuffer,loop');
         
            // Truthy params enables them
            if (this.autoplay) this.bodyCfg.autoplay = 1;
            if (this.controls) this.bodyCfg.controls = 1;
         
            // Handle multiple sources
            if (Ext.isArray(this.src)) {
                for (var i = 0, len = this.src.length; i < len; i++) {
                    if (!Ext.isObject(this.src[i])) {
                        throw "source list passed to html5video panel must be an array of objects";
                    }
                    this.bodyCfg.children.push(
                        Ext.applyIf({tag: 'source'}, this.src[i])
                    );
                }
                this.bodyCfg.children.push({
                    html: fallback
                });
            } else {
                this.bodyCfg.src  = this.src;
                this.bodyCfg.html = fallback;
            }
            Ext.ux.HTML5VideoPanel.superclass.onRender.apply(this, arguments);
            this.video = this.body;
        },
    
        onResize: function() {
            Ext.ux.HTML5VideoPanel.superclass.onResize.apply(this, arguments);
            Ext.apply(this.body.dom, this.body.getSize());
        },
    
        onDestroy: function() {
            Ext.ux.HTML5VideoPanel.superclass.onDestroy.apply(this, arguments);
            if (this.tooltip) {
                delete this.tipCtx;
                this.tooltip.destroy();
                Ext.TaskMgr.stop(this.tipUpdateTask);
            }
        },
    
        getPreviewer: function() {
            if (!this.tooltip) {
                this.tooltip = new Ext.ToolTip({
                    anchor   : 'bottom',
                    autoHide : this.autoHidePreview,
                    hideDelay: Ext.num(this.hidePreviewDelay, Number.MAX_VALUE),
                    height   : this.tipHeight,
                    width    : this.tipWidth,
                    bodyCfg  : {
                        tag    : 'canvas',
                        width  : this.tipWidth,
                        height : this.tipHeight
                    },
                    listeners: {
                        render: this.onTipRender,
                        show: this.onTipShow,
                        hide: this.onTipHide,
                        scope: this
                    }
                });
    
    //          Task to keep the tip updated while it is visible
                this.tipUpdateTask = {
                    run: this.updatePreview,
                    interval: 20,
                    scope: this
                };
            }
            return this.tooltip;
        },
    
        onTipRender: function() {
            this.tipCtx = this.tooltip.body.dom.getContext('2d');
        },
    
        onTipShow: function() {
            Ext.TaskMgr.start(this.tipUpdateTask);
        },
     
        onTipHide: function() {
            Ext.TaskMgr.stop(this.tipUpdateTask);
        },
     
        updatePreview: function() {
            if (this.tipCtx) {
                this.tipCtx.drawImage(this.body.dom, 0, 0, this.tipWidth, this.tipHeight);      
            }
        }  
    });
    Ext.reg('html5video', Ext.ux.HTML5VideoPanel);
    This means that to get it working in a desktop, all you do is add the line in red:

    Code:
        getModules : function(){
            return [
                new MyDesktop.GridWindow(),
                new MyDesktop.TabWindow(),
                new MyDesktop.AccordionWindow(),
                new MyDesktop.BogusMenuModule(),
                new MyDesktop.BogusModule(),
                new MyDesktop.VideoWindow()
            ];
        },
    And create the module:

    Code:
    MyDesktop.VideoWindow = Ext.extend(Ext.app.Module, {
        id: 'video-win',
    
        init: function () {
            this.launcher = {
                text: 'Video Window',
                iconCls: 'icon-grid',
                handler: this.createWindow,
                scope: this
            };
        },
    
        createWindow: function () {
            /* createWindow uses renderTo, so it is immediately rendered */
            win = this.app.getDesktop().createWindow({
                animCollapse: false,
                constrainHeader: true,
                title: 'Video Window',
                width: 740,
                height: 480,
                iconCls: 'icon-grid',
                shim: false,
                border: false,
                layout: 'fit',
                items: {
                    xtype: 'html5video',
                    ref: 'videoPanel', // put a reference in the Window
                    src: [{    // firefox (ogg theora)
                        src: 'http://xant.us/files/google_main.ogv',
                        type: 'video/ogg'
                    }, {    // chrome and webkit-nightly (h.264)
                        src: 'http://xant.us/files/google_main.mgv',
                        type: 'video/mp4'
                    }],
                    autobuffer: true,
                    autoplay: true,
                    controls: true
                }
            });
            win.show();
            // Hook up the provided preview tooltip to our TaskBar button
            win.videoPanel.getPreviewer().initTarget(win.taskButton.el);
        }
    });

  2. #2
    Sencha User xantus's Avatar
    Join Date
    Aug 2007
    Location
    Seattle, WA
    Posts
    135
    Vote Rating
    0
    xantus is on a distinguished road

      0  

    Default


    Thanks Animal!

    I've been meaning to update the blog post, but I've been pretty busy.
    Software Engineer
    http://xant.us/

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    898
    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

      0  

    Default


    Of course if you didn't want to use it in the Desktop example you can...

    Ext.ux.HTML5VideoPanel.js:
    Code:
    Ext.ns('Ext.ux');
     
    /* -NOTICE-
     * For HTML5 video to work, your server must
     * send the right content type, for more info see:
     * https://developer.mozilla.org/En/HTML/Element/Video
     */
    Ext.ux.HTML5VideoPanel = Ext.extend(Ext.Panel, {
     
      constructor: function(config) {
        Ext.ux.HTML5VideoPanel.superclass.constructor.call(this, Ext.applyIf(config, {
          width    : '100%',
          height   : '100%',
          autoplay : false,
          controls : true,
          bodyStyle: 'background-color:#000;color:#fff',
          html     : '',
          suggestChromeFrame: false
        }));
     
        this.on({
          scope        : this,
          render       : this._render,
          beforedestroy: function() {
            this.video = null;
          },
          bodyresize   : function(panel, width, height) {
            if (this.video)
            this.video.setSize(width, height);
          }
        });
      },
     
      _render: function() {
        var fallback = '';
     
        if (this.fallbackHTML) {
          fallback = this.fallbackHTML;
        } else {
          fallback = "Your browser doesn't support html5 video. ";
     
          if (Ext.isIE && this.suggestChromeFrame) {
            /* chromeframe requires that your site have a special tag in the header
             * see http://code.google.com/chrome/chromeframe/ for details
             */
            fallback += '<a>Get Google Chrome Frame for IE</a>';
          } else if (Ext.isChrome) {
            fallback += '<a>Upgrade Chrome</a>';
          } else if (Ext.isGecko) {
            fallback += '<a>Upgrade to Firefox 3.5</a>';
          } else {
            fallback += '<a>Get Firefox 3.5</a>';
          }
        }
     
        /* match the video size to the panel dimensions */
        var size = this.getSize();
     
        var cfg = Ext.copyTo({
          tag   : 'video',
          width : size.width,
          height: size.height
        },
        this, 'poster,start,loopstart,loopend,playcount,autobuffer,loop');
     
        /* just having the params exist enables them */
        if (this.autoplay) cfg.autoplay = 1;
        if (this.controls) cfg.controls = 1;
     
        /* handle multiple sources */
        if (Ext.isArray(this.src)) {
          cfg.children = [];
     
          for (var i = 0, len = this.src.length; i < len; i++) {
            if (!Ext.isObject(this.src[i])) {
              throw "source list passed to html5video panel must be an array of objects";
            }
     
            cfg.children.push(
              Ext.applyIf({tag: 'source'}, this.src[i])
            );
          }
     
          cfg.children.push({
            html: fallback
          });
     
        } else {
          cfg.src  = this.src;
          cfg.html = fallback;
        }
     
        this.video = this.body.createChild(cfg);
      }
     
    });
     
    Ext.reg('html5video', Ext.ux.HTML5VideoPanel);
    test.js:
    Code:
    var win = new Ext.Window({
    	animCollapse   : false,
    	constrainHeader: true,
    	title  : 'Video Window',
    	width  : 740,
    	height : 480,
    	shim   : false,
    	border : false,
    	layout : 'fit',
    	items: [{
    		xtype: 'html5video',
    		src: [{
    			src : 'video.mp4',
    			type: 'video/mp4'
    		}],
    		autobuffer: true,
    		autoplay : true,
    		controls : true
    	}]
    }).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. #4
    Ext User mr-romaniko's Avatar
    Join Date
    May 2010
    Location
    Georgia, Tbilisi
    Posts
    5
    Vote Rating
    0
    mr-romaniko is on a distinguished road

      0  

    Default ..

    ..


    how to make this????

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    Call getPreviewer

  6. #6
    Ext User mr-romaniko's Avatar
    Join Date
    May 2010
    Location
    Georgia, Tbilisi
    Posts
    5
    Vote Rating
    0
    mr-romaniko is on a distinguished road

      0  

    Default


    can you explain to me more circumstantially?
    please
    I'm georgian, and I know a few english

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

      0  

    Default


    src: 'http://xant.us/files/google_main.ogv',
    type: 'video/ogg'

    Here i want to set my youtube URL and also set type. IS IT POSSIBLE ?

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    898
    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

      0  

    Default


    Quote Originally Posted by mdineshkumarcs View Post
    Here i want to set my youtube URL and also set type. IS IT POSSIBLE ?
    Have you tried it?
    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.

  9. #9
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    21
    Vote Rating
    0
    xbboys is on a distinguished road

      0  

    Default


    Hi everyone,

    I am looking forward to do something similar but on a normal extjs window without video. Something like Win Vista. Do you think it is possible?

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    Is that some weird spam?

    Because it doesn't make any sense.