前言：老师让我修改一个需要播放器的界面，之前的播放器有挺多功能需要修改，于是就从网上找了新的播放器插件，也就是Video.js，在网上找了挺久没什么靠谱的资料，于是记录一下。
第一章 videojs的配置与简介
关于videojs我是在http://www.jq22.com/jquery-info404这个网站下载的6.2.8版本，下载完了之后再解压是这样的，
我们需要其中两个文件，一个是video-js.css文件，一个是video.min.js文件，我们打开index网页应该也能发现，但是仅凭这两个我们还不能播放m3u8文件，根据网上的资料，我们还需要再引入一个文件videojs-contrib-hls.js，我从https://github.com/videojs/videojs-contrib-hls/releases上找到了这个文件并下载。具体如下图。
由此我们需要的三个文件就下载齐了。
另：英文api：https://videojs.com/
https://github.com/videojs/videojs-contrib-hls
第二章 更改视频源
videojs更改视频源很简单，利用如下代码即可。
myPlayer.src({src: "xinlingjitang.m3u8", type: "application/x-mpegURL"});其中src是视频的地址，我这里视频和网页放在一个地址下，所以直接填的名字。
type的话是视频类型，m3u8的话填上面的格式就行了。
切换视频源实例：
<html>
<head>
<meta charset="utf-8">
<title>Video.js 6.2.8</title>
<link href="css/video-js.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<style>
.m{ width: 740px; height: 400px; margin-left: auto; margin-right: auto; margin-top: 100px; }
</style>
</head>
<body>
<div class="m">
<video id="my-video" class="video-js" controls preload="auto" width="740" height="400"
poster="m.png" data-setup="{}">
</video>
</div>
</body>
<script src="js/video.min.js"></script>
<script src="js/videojs-contrib-hls.js"></script>
<script type="text/javascript">
var videoObj = videojs('my-video');
var option={};
/*option只是一个参数,function onPlayerReady就是播放器初始化完成时会执行的回调函数*/
var myPlayer = videojs('my-video',option,function onPlayerReady(){
var myPlayer = this;
myPlayer.src({src: "xinlingjitang.m3u8", type: "application/x-mpegURL"});
this.play();
});
</script>
</html>
第三章 视频api介绍
这里的api是直接从https://www.cnblogs.com/tinywan/p/6692098.html博客里复制的。
播放：
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);
第四章 api的部分应用实例
注意必须用videojs获取的实例才能调用方法，用jq获取的对象不行。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video.js 6.2.8</title>
<link href="css/video-js.css" rel="stylesheet">
<style>
.m{ width: 740px; height: 400px; margin-left: auto; margin-right: auto; margin-top: 100px; }
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
</head>
<body>
<div class="m">
<video id="my-video" class="video-js" controls preload="auto" width="740" height="400"
poster="m.png" data-setup="{}">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<input type="button" value="跳转进度" onclick="tiaozhuan1()" />
<input type="button" value="获取进度" onclick="huoqu1()" />
<input type="button" value="切换视频" onclick="qiehuan1()" />
<input type="button" value="获取时间" onclick="huoqushijian1()" />
</div>
</body>
<script src="js/video.min.js"></script>
<script src="js/videojs-contrib-hls.js"></script>
<script type="text/javascript">
var videoObj = videojs('my-video');
var option={};
var myPlayer = videojs('my-video',option,function onPlayerReady(){
var myPlayer = this;
myPlayer.src({src: "xinlingjitang.m3u8", type: "application/x-mpegURL"});
videojs.log("播放器已经准备好了!");
this.play();
});
/*让视频跳转到一个进度,单位是秒*/
function tiaozhuan1(){
videoObj.currentTime(120);
}
/*currentTime是获取当前视频的播放时间,我这里让它转成了xx:xx:xx的格式*/
function huoqu1(){
var videoTime = videoObj.currentTime();
//获取视频有几个小时
var h = Math.floor(videoTime / 3600);
//获取视频有多少分钟
var m = Math.floor(videoTime % 3600 / 60);
//获取视频有多少秒
var s = Math.floor(videoTime % 60);
//将视频格式化为xx:xx:xx,比如1个小时12分钟11秒的视频就是01:12:11
console.log((h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s));
console.log(videoTime);
}
/*这里我切换了一个新的视频源*/
function qiehuan1(){
videoObj.src({src: "index.m3u8", type: "application/x-mpegURL"});
}
/*这样可以获取视频的总长度,单位是秒*/
function huoqushijian1(){
var howLongIsThis = videoObj.duration();
console.log(howLongIsThis);
}
/*这样是再加载视频时会执行的函数,每次切换视频源都会调用此函数*/
videoObj.on("loadedmetadata",function(){
console.log("正在读取配置信息")
});
</script>
</html>
实现效果：
