videojs就提供了这样一套解决方案，他是一个兼容HTML5的视频播放工具，早期版本兼容所有浏览器，方法是：提供三个后缀名的视频，并在不支持html5的浏览器下生成一个flash的版本。
最新的版本
下载-5.8.0-releases版本
目录结构
video.js/
├── alt
│ ├── video.novtt.js
│ ├── video.novtt.min.js
│ └── video.novtt.min.js.map
├── examples/
├── font
│ ├── VideoJS.eot
│ ├── VideoJS.svg
│ ├── VideoJS.ttf
│ └── VideoJS.woff
├── ie8
│ ├── videojs-ie8.js
│ └── videojs-ie8.min.js
├── lang/
├── video-js-5.8.0.zip
├── video-js.css
├── video-js.min.css
├── video-js.swf
├── video.js
├── video.js.map
├── video.min.js
└── video.min.js.map
-
引用脚本，videojs很为你着想，直接cdn了，你都不需要下载这些代码放入自己的网站
<link href=”http://vjs.zencdn.net/c/video-js.css” rel=”stylesheet”>
<script src=”http://vjs.zencdn.net/c/video.js”></script> -
如果需要支持IE8，这个js可以自动生成flash
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -
页面中加入一个html5的video标签
<video id="my_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264" poster="my_video_poster.png" data-setup="{}">
<source src="my_video.mp4" type="video/mp4">
<source src="my_video.webm" type="video/webm">
</video>
其中post就是视频的缩略图，那俩source一个指向mp4视频，一个指向webm视频，在页面加载过程中，video.js会判断浏览器支持哪个格式视频，会自动加载可播放的视频。
简单吧！
进阶：使用api
获取对象：
后面那个就是就是video标签的id值，这是myPlayer就是播放器对象了。
videojs("my-video").ready(function(){
window.myPlayer = this;
// EXAMPLE: Start playing the video.
myPlayer.play();
});
方法：
获取对象
var videoObj = videojs(“videoId”);
ready:
myPlayer.ready(function(){
//在回调函数中，this代表当前播放器，
//可以调用方法，也可以绑定事件。
})
播放：
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();
添加事件
durationchange
ended //播放结束
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause //暂停
play //播放
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
var myFunc = function(){
// Do something when the event is fired
};
事件绑定
myPlayer.on("ended", function(){
console.log("end", this.currentTime());
});
myPlayer.on("pause", function(){
console.log("pause")
});
删除事件
myPlayer.removeEvent(“eventName”, myFunc);
虽然文章说明在不支持html5的情况下，会以flash播放，但在支持html5的firefox下播放mp4时，却遇到很大的困难，虽然调用了flash，但一直无法播放（不过我也一直怀疑我的firefox下的flash有问题，不知道是不是真的）。不过如果你听从videojs的建议，放两个格式的视频，就不会有这个问题了。
另外video的写法中还有专门针对flash的写法，当然你也可以用这个插件实现纯粹的flash播放（只写flash那部分就好，可以保证统一的浏览效果，不过iOS的浏览器不兼容flash，这就要你自己进行判断来处理
转自：http://blog.csdn.net/ly115176236/article/details/50977127#comments