vedio.js 是一款视频播放插件,它会自动检测浏览器对 HTML5 的支持状况,若是不支持 HTML5 则自动使用 Flash 播放器。下面来介绍下它的使用:javascript
引用video-js.cs样式文件和video.jscss
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
设置flash播放器的路径,若是你的浏览器不支持html5,将会使用flash播放html
<script> videojs.options.flash.swf = "video-js.swf"; </script>
body部分,这里支持三种格式MP4,webm,ogg,也能够设置网络路径,poster:视频的封面图片html5
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="800" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
<source src="wangmaohuijieshao.mp4" type='video/mp4' />
<!--<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />-->
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>
自动播放:java
<script type="text/javascript">
var myPlayer = videojs('example_video_1'); videojs("example_video_1").ready(function () { var myPlayer = this; myPlayer.play(); }); </script>
一些参数:web
var myPlayer = videojs(“example_video_1″);//获取对象,example_video_1就是video标签的id值
myPlayer.play();//播放
myPlayer.pause();//暂停
var whereYouAt = myPlayer.currentTime();//获取播放进度:
myPlayer.currentTime(120);//设置播放进度:
var howLongIsThis = myPlayer.duration();//视频持续时间,加载完成视频才能够知道视频时长,且在flash状况下无效
var whatHasBeenBuffered = myPlayer.buffered();//缓冲,就是返回下载了多少
var howMuchIsDownloaded = myPlayer.bufferedPercent();//百分比的缓冲
var howLoudIsIt = myPlayer.volume();//获取声音大小
myPlayer.volume(0.5);//设置声音大小(0-1之间)
var howWideIsIt = myPlayer.width();//取得视频的宽度
myPlayer.width(640);//设置宽度
var howTallIsIt = myPlayer.height();//获取高度
myPlayer.height(480);//设置高度:
myPlayer.size(640,480);//一步到位的设置大小:
myPlayer.enterFullScreen();//全屏 //自定义事件
var myFunc = function(){ // Do something when the event is fired
}; //添加事件
myPlayer.addEvent(“eventName”, myFunc); //删除事件
myPlayer.removeEvent(“eventName”, myFunc);
附:video.js.zip浏览器