非常HTML5预览：Video/Canvas/Ext JS

HTML5, Video, Canvas, and Ext JS

January 14, 2010 by David Davis

HTML5正要来临。本文将会检视一下两个HTML5开发至为引人注目的特性——视频Video及Canvas。Ext的大伙们都迫不及待地赶上新标准，看有什么可以为我们所承诺的。<video>标签是为了原生的视频渲染，这样的话就不用那些第三方的如Flash的插件。至于<canvas>标签，则是为了在像素级别，这么细的一个级别中“画出”复杂的图形图像，而且是一个清晰而强大的API。

作为HTML5的一部分，可以用CSS和JavaScript来自定义元素<video> ，使得我们能够用一种不错的方式对用户收看的视频加以处理。不妨稍微试想一下，我们就可以此为新题材，做出新的组件，例如下面的例子就是，这是个“live video”预览图：

以上是Ext JS web desktop的截图，演示了置于Window中的HTML5视频。貌似不太出彩？那就将你鼠标移到任务栏的按钮之上，视频播放器的那个。呵呵，笔者用了标签<canvas>渲染着一个小小的预览图，就是当前视频的直接更新内容。

构建一个HTML5 视频窗体

例子设置过程中，我会告诉阁下怎么将video的元素放置到一个window窗体中去，并且制作quciktip的预览图，几乎都是几行代码足以完成。

首先扩展Ext.Panel使其可以播放HTML5的视频：

Ext.ns('Ext.ux'); /* -NOTICE- * 要HTML5视频正常工作，你的服务器一定要发送正确的内容类型，有关更多 * 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);

代码中我登记了扩展的“html5video”，定义新型的xtype，意味着在panel或window就可以直接使用。我们打算在Ext JS web desktop的基础上演示这个html5video，若阁下还不了解web desktop，可参考这里。

接下来我们加入html5video到web桌面的window，并加入任务栏按钮的canvas预览（具体是，下载Ext 3.0到服务器上跑，修改examples/desktop的sample.js文件）。

粘贴下面的html5扩展并在sample.js底部加入video window aspp，或者干脆用这份拷贝覆盖之。

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

现在加入getModules的app构造代码，在sample.js顶部就可以：

getModules : function(){ return [ new MyDesktop.GridWindow(), new MyDesktop.TabWindow(), new MyDesktop.AccordionWindow(), new MyDesktop.BogusMenuModule(), new MyDesktop.BogusModule(), /*加入下面的一行代码，也注意一下上面的逗号不要漏*/ new MyDesktop.VideoWindow() ]; }

如上述代码，我们在src参数中指定了两份文件。这不是播放列表，而是视频格式的兼容列表。因为不是全部的浏览器都支持同一种的视频格式，因此要引入多种兼容格式的代码。

你可以把上面的例子放在Firefox 3.5+、Google Chrome里面跑，选择Start->Video Window。这个例子也可以支持webkit-nightly build （Safari4未正式加入HTML5 Video）。

这里是完成好的例子。

降级（Falling back）

降级的意思就是当浏览器不支持HTML5视频标签的时候，有一个平稳下降的机制。HTML5video Ext扩展中就有一个可选的配置项参数，“fallbackHTML”。你可以打开该配置项，进而退一步使用Flash来播放或者向用户提示一下信息。

YouTube和HTML5 (限于webkit所支持)

YouTube的任何视频均有h.264（mp4）格式的输出。所以你把h.264的url直接传送到video标签即可，就是这样简单。不过由于Firefox并不支持h.264只支持OGG Theora的格式源，所以就必须经过转换一下。YouTube HTML5 Viewer就可以将这样YouTube的h.264的视频转换为HTML5的视频标签。

小结

HTML5仍在草案的阶段，不过现代浏览器可不是盖的，在HTML5的视频方面就搞出多少眉目来。尽管解码器还有点状况，但我们总可以用一些工具来解决API问题。