videojs就提供了这样一套解决方案,他是一个兼容html5的视频播放工具,早期版本兼容所有浏览器,方法是:提供三个后缀名的视频,并在不支持html5的浏览器下生成一个flash的版本。
最新的3.1.0版本优化了之前的做法,只需要提供两个格式的视频,页面制作起来更加方便,只有两步走:
1、引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站
2、页面中加入一个html5的video标签,要这么加:
其中poster就是视频的缩略图,那俩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); |
所有事件列表:
NameDescriptionloadstart开始加载
play播放
.pause暂停
.timeupdateFired when the current playback position has changed. During playback this is fired every 15-250 milliseconds, depnding on the playback technology in use.就是时间变化吧,与具体的播放技术有关,不同浏览器及格式不同。
ended播放结束
durationchangeFired 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的建议,放两个格式的视频,就不会有这个问题了。
