HTML5, Video, Canvas 和 Ext JS

HTML5时代即将到来。我们都很高兴Ext能够接受新的标准，因为它得到接受。这篇文章将研究两个显着的HTML5的开发(video和canvas)。

作为HTML5的一部分，

上图是一个ExtJS Web桌面，在窗口中的一个通过HTML5 video元素显示的视频。没有什么好兴奋的....直到你将鼠标移到任务栏的视频播放器按钮上。在这里，我通过使用标记来呈现一个实时从视频更新的小预览缩略图。

建立HTML5视频窗口
在这一部分，我将告诉你如何将一个video元素放到在窗口中并生成预览的quicktip.完成这些,你仅需要写很少的代码.

我们以建立一个可以显示HTML5 video的Ext.Panel扩展开始:

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)) {
          throw "source list passed to html5video panel must be an array of objects";
        }

        cfg.children.push(
          Ext.applyIf({tag: 'source'}, this.src)
        );
      }

      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);

您会发现，我已经注册了名为'html5video'扩展。这就意味着你可以在panel和window中使用xtype：'html5video'。我们将使用ExtJS Web桌面的例子。如果你对它还不了解，可以在这里找到它。

下一步，我们将html5video panel添加到Web桌面的window上，并将canvas预览添加到任务栏按钮中（你可以跟着我们一起，首先下载并解压缩ExtJS3.0在Web服务器上，然后编辑examples/desktop目录下面的sample.js文件 ）。

粘贴下面的html5扩展代码到sample.js底部就添加video window app了。或者用此版本覆盖。

Desktop.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() {
    var win,
        tipWidth  = 160,
        tipHeight = 96;

    /* 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',
        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,
        /* default */
        listeners: {
          afterrender: function() {
            var win = this.ownerCt;
            win.videoEl = this.video.dom;

            win.tip = new Ext.ToolTip({
              anchor   : 'bottom',
              autoHide : true,
              hideDelay: 300,
              height   : tipHeight,
              width    : tipWidth,
              bodyCfg  : {
                tag    : 'canvas',
                width  : tipWidth,
                height : tipHeight
              },
              listeners: {
                afterrender: function() {
                  /* get the canvas 2d context */
                  win.ctx = this.body.dom.getContext('2d');
                }
              }
            });
          }
        }
      }],
      listeners: {
        beforedestroy: function() {
          win.tip = win.ctx = win.videoEl = null;
        }
      }
    });

    win.show();

    win.tip.initTarget(win.taskButton.el);
    win.tip.on('show', this.renderPreview.createDelegate(this, [win]));
  },

  renderPreview: function(win) {
    if ((win.tip && ! win.tip.isVisible()) || !win.videoEl) return;

    if (win.ctx) {
      win.ctx.drawImage(win.videoEl, 0, 0, win.tip.width, win.tip.height);      
    }

    /* 20ms to keep the tooltip video smooth */
    this.renderPreview.defer(20, this, [win]);
  }

});

现在我们在sample.js文件的头部给getModules加上app构造函数。

getModules : function(){
  return [
    new MyDesktop.GridWindow(),
    new MyDesktop.TabWindow(),
    new MyDesktop.AccordionWindow(),
    new MyDesktop.BogusMenuModule(),
    new MyDesktop.BogusModule(),
    /* add the line below, and don't forget the comma above */
    new MyDesktop.VideoWindow()
  ];
}

在上述所述，我们在src参数中指定了两个文件。不要以为这是播放列表，它只是视频格式的兼容列表。因为并非所有浏览器都支持相同的格式，所以你必须包括多种来源，从Firefox支持的格式开始。

上面的这个例子你可以在 Firefox 3.5+ 或者 Google Chrome 中打开。选择Start->Video Window。当然这些例子也可以运行在基于webkit-nightly核心的浏览器(Safari 4尚未加入HTML5 video)。

兼容性
HTML5 video标记允许在浏览器不支持的时候有一个向下兼容.html5video Ext 扩展有一个选择参数 - ‘fallbackHTML’. 你可以通过这个配置项来告诉用户是要升级浏览器还是使用flash播放器来播放.

YouTube和HTML5 (仅限webkit)
YouTube 所有视频都有一个格式为"h.264 (mp4)"的 源. 虽然不是很明显, 你可以将 h.264 源的url直接传给 video 标签. 但这个在 Firefox并不可行. YouTube 也没有一个格式为OGG Theora 的源. YouTube HTML5 Viewer 可以很容易让你创建一个基于 YouTube h.264 源的HTML5 video 标签.

总结
一些比较潮流的浏览器在HTML5 处于起草阶段的时候就加了HTML5 video元素的支持.
尽管编码/解码器支持还有一些问题,我们仍然可以围绕这一个API来建立我们的工具.

原文:
http://www.extjs.com/blog/2010/01/14/html5-video-canvas-extjs/