1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      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
    35,731
    Vote Rating
    754
    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,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      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
    35,731
    Vote Rating
    754
    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,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Is that some weird spam?

    Because it doesn't make any sense.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar