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问题。