videojs 视频开发API

  　　videojs就提供了这样一套解决方案，他是一个兼容html5的视频播放工具，早期版本兼容所有浏览器，方法是：提供三个后缀名的视频，并在不支持html5的浏览器下生成一个flash的版本。

最新的3.1.0版本优化了之前的做法，只需要提供两个格式的视频，页面制作起来更加方便，只有两步走：
　　1、引用脚本，videojs很为你着想，直接cdn了，你都不需要下载这些代码放入自己的网站
　　　　<link href=”http://vjs.zencdn.net/c/video-js.css” rel=”stylesheet”>
　　　　<script src=”http://vjs.zencdn.net/c/video.js”></script>
　　2、页面中加入一个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

　　获取对象：
　　　　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的建议，放两个格式的视频，就不会有这个问题了。
　　最后，这么好使的脚本，是免费的么？
　　经查，该脚本遵循LGPLv3协议，听着协议又头大了？这里讲个常识：
　　如果你的项目中要使用开源的代码，而你的项目又不开源，可选的开源协议有：BSD、MIT、LGPL、Apache Licence 2.0。其中前两种甚至可以修改源代码，但一定要标注版权；后两种可以随便用，但是不要随便改，呵呵。所以你要使用这个脚本的话，是完全可以的，api也这么全，至于css，并不受版权保护，你可以根据需要改变为你要的样式即可。

 

转载于:https://www.cnblogs.com/Sonet-life/p/5179132.html