由于项目中的视频返回格式是m3u8，于是选择较为成熟的video.js，这里先贴上官网文档地址 https://docs.videojs.com/
进入可以看到插件的API和使用指南，还包括angularJS、react等框架的使用方法，因为我们项目用的vue框架，这里直接看vue的使用。
npm install --save-dev video.js
安装成功后，在man.ts文件下引入对应的css样式，并进行全局组件注册
到这一步视频就可以播放了，因为我们项目的视频是m3u8格式，在设置sources的时候，type需要设置为 application/x-mpegURL ，目前使用已知支持的视频格式有mp4、rtmp、flv还有目前正在使用的m3u8，其他格式需要各位看官自行搜索是否是否支持了。同时，options可设置的不仅仅是上面的内容，通过文档可以查看其他设置， https://docs.videojs.com/tutorial-options.html#controls 。
我们项目里用到的是实时监控画面，所以需要切换不同的监控点，下面对于切换视频地址贴上简单的示例。
到此，视频地址的切换功能也完成了。因为是实时监控视频，目前还有个问题还没解决，当视频播放到一定时间后，就会存在视频加载问题，会造成视频播放不够流畅，这个问题还在研究中，解决后会继续更新到这篇文章里。由于初次使用videoJS插件，还有很多功能不够熟悉需要继续研究，各位看官也可以直接在评论区进行交流。
jsvideo默认播放没有声音原因如下:1.声音播放的默认设备不是你的声卡设备。可以进“控制面板”--“声音和音频设备”在弹出的对话框中选择语声，可以查看你的声音播放的默认设备是不是正常，也可以测试各个音频设备。
2.检查你播放程序的解码器是否正常。很怀疑你是安装了某个播放软件，解码器不兼容导致的无声，比如说Realplay11的cook.dll就会造成KMPlayer播放器无声，不知道你，建议你删除不必要的程序，保留一个音乐播放器一个视频播放器比较好。
3.声卡驱动被破坏，建议你进安全模式删除驱动后，在重新安装原装驱动.
（1）HTML页面视频标签大体如下
<video id="video"controls="controls">
<source src="./video/2.mp4" type="video/mp4" />
</video>
（2）视频加载后获取视频的长度
varelevideo = document.getElementById("video")
elevideo.addEventListener('loadedmetadata', function () {//加载数据
//视频的总长度 console.log(elevideo.duration)
})
（3）视频开始播放
varelevideo = document.getElementById("video")
elevideo.addEventListener('play', function () {//播放开始执行的函数
console.log("开始播放")
})
（4） 视频正在播放中
varelevideo = document.getElementById("video")
elevideo.addEventListener('playing', function () {//播放中console.log("播放中")
})
（5）视频加载中
varelevideo = document.getElementById("video")
elevideo.addEventListener('waiting', function () {//加载
console.log("加载中")
})
（6）视频暂停播放
varelevideo = document.getElementById("video")
elevideo.addEventListener('pause', function () {//暂停开始执行的函数
console.log("暂停播放")
})
（7）视频结束播放
varelevideo = document.getElementById("video")
elevideo.addEventListener('ended', function () {//结束
console.log("播放结束")
}, false)
