html5的标准还没有最终确定，但关于视频播放器的标准基本上被卡住了。mazilla和Opera由于没有H264的版权，坚持不支持H264标准的mp4格式视频，只支持ogg和webm两种格式，其中webm是谷歌去年提供的一个新的标准，并将该格式开源；ogg似乎是早期的一种手机视频的格式，这个了解不多。但也许mp4视频效果比较好，现在应用比较广。而IE9、safari、chrome三大厂商不担心版权问题，都提供了对H264的支持。所以当前兼容所有支持html5的视频播放方案差不错都是这样：
对同一视频提供三种格式，即mp4、webm、ogg，但其实仔细想想，只需要提供两种：mp4和webm，就可以了。
videojs就提供了这样一套解决方案，他是一个兼容html5的视频播放工具，早期版本兼容所有浏览器，方法是：提供三个后缀名的视频，并在不支持html5的浏览器下生成一个flash的版本。

最新的3.1.0版本优化了之前的做法，只需要提供两个格式的视频，页面制作起来更加方便，只有两步走：
1、引用脚本，videojs很为你着想，直接cdn了，你都不需要下载这些代码放入自己的网站


2、页面中加入一个html5的video标签，要这么加：

其中post就是视频的缩略图，那俩source一个指向mp4视频，一个指向webm视频，在页面加载过程中，video.js会判断浏览器支持哪个格式视频，会自动加载可播放的视频。
简单吧！

进阶：使用api

获取对象：
var myPlayer = _V_(“my_video_1”);
后面那个就是就是video标签的id值，这是myPlayer就是播放器对象了。

播放：
myPlayer.play();
暂停：
myPlayer.pause();
获取播放进度：
var whereYouAt = myPlayer.currentTime();
设置播放进度：
myPlayer.currentTime(120);
视频持续时间，加载完成视频才可以知道视频时长，且在flash情况下无效
var howLongIsThis = myPlayer.duration();
缓冲，就是返回下载了多少
var whatHasBeenBuffered = myPlayer.buffered();
百分比的缓冲
var howMuchIsDownloaded = myPlayer.bufferedPercent();
声音大小（0-1之间）
var howLoudIsIt = myPlayer.volume();
设置声音大小
myPlayer.volume(0.5);

取得视频的宽度
var howWideIsIt = myPlayer.width();

设置宽度：
myPlayer.width(640);
获取高度
var howTallIsIt = myPlayer.height();
设置高度：
myPlayer.height(480);
一步到位的设置大小：
myPlayer.size(640,480);

全屏
myPlayer.enterFullScreen();
离开全屏
myPlayer.enterFullScreen();

添加事件
var myFunc = function(){
// Do something when the event is fired
};
myPlayer.addEvent(“eventName”, myFunc);
删除事件
myPlayer.removeEvent(“eventName”, myFunc);

所有事件列表：

Name

Description

loadstart

开始加载

play

播放.

pause

暂停.

timeupdate

Fired when the current playback position has changed. During playback this is fired every 15-250 milliseconds, depnding on the playback technology in use.就是时间变化吧，与具体的播放技术有关，不同浏览器及格式不同。

ended

播放结束

durationchange

Fired when the duration of the media resource is changed, or known for the first time.下载进度变化吧。

progress

进度变化.

resize

大小修改.

volumechange

音量变化.

error

出错.

      虽然文章说明在不支持html5的情况下，会以flash播放，但在支持html5的firefox下播放mp4时，却遇到很大的困难，虽然调用了flash，但一直无法播放（不过我也一直怀疑我的firefox下的flash有问题，不知道是不是真的）。不过如果你听从videojs的建议，放两个格式的视频，就不会有这个问题了。
最后，这么好使的脚本，是免费的么？
经查，该脚本遵循LGPLv3协议，听着协议又头大了？这里讲个常识：
如果你的项目中要使用开源的代码，而你的项目又不开源，可选的开源协议有：BSD、MIT、LGPL、Apache Licence 2.0。其中前两种甚至可以修改源代码，但一定要标注版权；后两种可以随便用，但是不要随便改，呵呵。所以你要使用这个脚本的话，是完全可以的，api也这么全，至于css，并不受版权保护，你可以根据需要改变为你要的样式即可。

关于开源协议，如果有朋友有兴趣，可以留言讨论，我将来会单独写一篇关于开源协议使用分析的文章。

另：附件中提供了3.1.0版本和2.0.2版本，我们并没有将2.0.2版本的用法，但压缩包里面有demo，使用的时候要调用下：VideoJS.setupAllWhenReady();

另外video的写法中还有专门针对flash的写法，当然你也可以用这个插件实现纯粹的flash播放（只写flash那部分就好，可以保证统一的浏览效果，不过ios的浏览器不兼容flash，这就要你自己进行判断来处理了）。

今天早上看到的消息，说微软近日表示在Sliverlight的版本5正式发布后停止开发，虽然我觉得这是早晚的事，但现在听到这个消息还是比较惊讶，比原来预计的似乎早了很久。

记得09年初的时候，我对Sliverlight做过几天的研究。因为那时候Sliverlight炒的很火，话说美国总统奥巴马的竞选演说，使用的就是Sliverlight发布的视频。可谓盛极一时。但我当时的感觉总觉得微软是在于ADOBE抢一块蛋糕，或者是搅Adobe的局。因为大家都很清楚，HTML5标准一旦确定，可能Sliverlight和Flash都不存在了（当时我谈到这个想法时，记得还被朋友们嘲笑过）。

当时业界对HTML5标准确定的时间估计在2022年（记忆中），按照那个推算，至少要到2015年以后，HTML5才会逐渐被各家浏览器支持，也就是说，Flash和Silverlight可能要支撑到2020年以后才会逐步消失。这些是当年的估计了。但Iphone的出现与移动智能设备的迅速发展，大大加速了这一进程，去年已经有很多有远见的公司大量招聘HTML5的开发人员了。

此后Sliverlight版本升级到4.0后，又在很多方面接触Silverlight，比如WP7和Xbox，我感觉他的类库比较乱，WP7一套、7.1还有一套、PC上又有一套，而且互不兼容，各自为政——虽然都叫Silverlight。而就在不久前，微软还宣布要用Silverlight来统一这几大平台（Windows、Windows Phone和Xbox），要让他们兼容么？但微软还在各个方面独立发展，版本分裂严重。

今天早上看到的第一个消息是Adobe宣布移动版的Flash不再研发，后面就看到了微软的这则消息。难道这两家商量好的？Adobe的这个决定不难理解，他买下了PhoneGap（这个恰巧昨天的一篇文章就提到，呵呵），势必要推进在HTML5方面的开发标准，放弃移动版Flash甚至最终整个放弃Flash，完全推进HTML5。而微软呢？Silverlight一出生，就是冲着Flash来的，竞争对手要放弃了，他也没啥继续存在的必要了？

我觉得没这么简单。微软下一步一定要在手机和平板上有所作为，就要找到新的竞争目标，而现在市场占有率最高的手机系统是安卓。安卓是谷歌“无心插柳”的结果，这一结果使得谷歌不太好轻易放弃既得利益。我们知道，谷歌还有个系统叫做ChomeOS，那个才是给未来的HTML5市场准备的；安卓虽也支持HTML5，毕竟不是主要的优势。大力推广HTML5对ChomeOS有利但对安卓不利（影响原生App应该的开发者），安卓束缚了谷歌的手脚，使其在既得利益面前左右为难。微软的这项决策，即决定自己未来的方向，又笼络大批支持HTML5的开发者，还对谷歌来这么这么一手，可谓可谓一箭多雕。

闲话苹果，之前有看到分析称，推进HTML5对苹果有利，不推进也对苹果有利，苹果真是牛啊。

前两个月还在感叹WebOS的垮掉，现在突然发现HTML5比预期的时间提前来到了。难道真的是惠普的WebOS就是死在早了那么一两年么？那么真如现在所说的Oracle要低价收购的话，那真是在最合适的时间捡到一个大便宜啊。好了，废话不多说，今天推荐10款不错的HTML5的开发框架。

1、 Sencha Touch

Sencha Touch是专门为移动设备开发应用的Javascrt框架。通过Sencha Touch你可以创建非常像native app的web app，用户界面组件和数据管理全部基于HTML5和CSS3的web标准，全面兼容Android和Apple iOS。这个是大名鼎鼎的EXT框架的公司整合其另外两个框架发展而来的，自然首先推荐。

今天 Sencha Touch 发布 2.0 的首个开发者预览版。这在 Sencha Touch 1.0 发布的一年之后。新版本主要工作侧重于性能提升、易用以及内置打包方面。

相关连接：

下载 Touch
Touch 文档
下载 SDK 工具 (Mac-only)

下图是 ST 2.0 和 1.0 在启动时间的比较：

另外 2.0 版本在文档方面也做了很多改进，查看 2.0 文档。

2、PhoneGap

PhoneGap是一款HTML5平台，通过它，开发商可以使用HTML、CSS及JavaScript来开发本地移动应用程序。因此，目前开发商可以只 编写一次应用程序，然后在6个主要的移动平台和应用程序商店(app store)里进行发布，这些移动平台和应用程序商店包括：iOS、Android、BlackBerry、webOS、bada以及Symbian。上个月该公司已经被Adobe公司协议收购，有了强大的后台支撑。（话说Adobe也通过收购在HTML5开发标准上占了一席之地啊）

下面是一些使用该框架的代码示例：

获取地理位置：

 //GAP will invoke this function once it has the location function gotLocation(lat,lon){ $('lat').innerHTML = "latitude: " + lat; $('lon').innerHTML = "longitude: " + lon; }

获取摄像头捕捉的照片

 function takePhoto(){ var photo = gap:takePhoto(); return photo; }

http://phonegap.com/

honeGap Mobile App XDK，可以让开发人员创建、模拟和测试PhoneGap项目。该工具是一个集成开发环境（IDE），提供了用于创建HTML5和PhoneGap应用的全套开发工具。AppMobi称，新的XDK为PhoneGap项目开发提供了一个直观的开发环境。

备注： phoneGap已出现就有很大反响，现在国内有个http://phonegap.cn爱好者网站，里面有中文的使用介绍。

3、ChocolateChip-UI

ChocolateChip-UI 是一个手机移动 Web 开发框架，使用 HTML5, WAML, CSS 和 JavaScript，基于 ChocolateChip JavaScript 库，包含新的 ChUI.JS 和 ChUI.css.可以在没有什么设计的情况下，开发出类似原生应用的界面来。

4、 Joshfire

Joshfire是一个支持多种设备的开发框架，仅采用HTML5和JavaScript等标准，可以帮助开发者迅速开发本地专用的网络应用，用于浏览器、Node.JS、桌面电脑、智能手机、智能电视以及联网设备。

多设备支持

不管你针对哪种设备开发，Joshfire可以让你「一次开发，多处兼容」，自动兼容手机、平板电脑、电视等设备。

针对内容进行优化

如果你想发布新闻、图片、音乐、视频，Joshfire框架可以帮你轻松开发全功能内容应用。

用户互动

忘掉那些为触控板、电视遥控器、键盘、鼠标、Kinect准备的专门设计吧，你只需要描述你的应用，其他的交给Joshfire。

客户端、服务器任意切换

下载地址：http://framework.joshfire.com/download

5、DHTMLX Touch

它是针对移动和触摸设备的JavaScript 框架。DHTMLX Touch基于HTML5，创建移动web应用。它不只是一组UI 小工具，而是一个完整的框架，可以针对移动和触摸设备创建跨平台的web应用。它兼容主流的web浏览器，用DHTMLX Touch创建的应用，可以在iPad、iPhone、Android智能手机等上面运行流畅。

6、jo

Jo这个框架可用于开发那支持HTML5的移动设备，如iOS,webOS, Android和Chrome OS等平台。

它拥有标准，类原生的UI元素比如用于屏幕登录的Web表单控件，还有弹出小部件可用于在用户点击界面时提供一些额外的信息。

可以查看其网站提供的示例页面，它例子展示了在多种移动设备平上的Jo应用情况。

http://joapp.com/downloads.html

7、mobl

mobl 其实是一个新的开源的编程语言，主要用于加速手机应用的开发，mobl 可方便构建手机 web 应用程序，包括 iOS、Android 和其他支持 HTML5 技术的手机。

主要特点：

• Statically typed language, enabling great IDE support and as-you-type error detection, while reducing the amount of typing other statically typed languages require, through type inference.

• Scripting language syntax similar to Javascript.

• Declarative domain-specific language (DSL) for defining user interfaces.

• Declarative concise DSL for defining data models. Data is stored on the device. No server back-end required.

• Easy access to existing “native” Javascript libraries and widgets.

• Compiler generates static Javascript and HTML files, ready to be deployed to any web host and to be cached on the device, to enable offline web applications.

http://www.mobl-lang.org/get/

8、SproutCore

SproutCore是一款HTML5的应用框架

在线演示

9、Perkins

Perkins 是一个 HTML5/CSS3 框架，主要为简化开发者和设计师的工具。使用一个基础的 HTML5 模板，包含多数所支持的标签以及一些 CSS 样式，便于创建诸如导航、圆角、渐进等效果。遵循MIT协议。

http://code.google.com/p/perkins-less/

10、AppMobi公司的HTML5框架

一家名叫AppMobi的小公司，正致力一项工作，使开发者能创建可深入移动设备硬件或操作系统功能的HTML5应用， 如重力感应、加速计、GPS、相机、声音与震动、文件系统等，InfoWorld报道。‘其iOS MobiUs浏览器为游戏实现了HTML5的DirectCanvas API，并为将浏览器缓存中的可执行文件和数据存储在本地（以使应用可以离线运行）实现了HTML5本地存储API。但是使MobiUs不同于仅仅只是另 外一个浏览器的是，AppMobi在它上面提供了一个库，它能允许开发者访问本地硬件，并实现Web应用的消息推送。’

网站

http://www.appmobi.com/

其开发中心链接

http://www.appmobi.com/?q=node/27

API 文档

http://appmobi.com/documentation/index.html

这里罗列了这么多的HTML5的应用框架，大多数都没有尝试使用，不过多数的文档写的还算详细。而HTML5大多是冲着移动应用开发来的。其实在Web上的实现与在原生应用里面的效果如果一致，岂不是最受开发者和公司欢迎么？而对最终用户，才不管你使用什么技术、什么平台，只要效果好就可以啊。