由于项目中的视频返回格式是m3u8，于是选择较为成熟的video.js，这里先贴上官网文档地址https://docs.videojs.com/
image.png
进入可以看到插件的API和使用指南，还包括angularJS、react等框架的使用方法，因为我们项目用的vue框架，这里直接看vue的使用。
vue引用
npm install --save-dev video.js
安装成功后，在man.ts文件下引入对应的css样式，并进行全局组件注册
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
Vue.prototype.$video = videojs;
单页面使用
//HTML部分
<div id='fid'>
<video ref="videoPlayer" class="video-js"></video>
</div>
//ts部分
<script lang='ts'>
export default class VideoItem extends Vue {
this.options = {
autoplay: true, // 如果true,浏览器准备好时开始播放。
muted: true, // 默认情况下将会消除任何音频。
loop: true, // 导致视频一结束就重新开始。
preload: 'auto', // auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN', //汉化
fluid: true, // 当true时，播放器将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [{
type: 'application/x-mpegURL',
src: this.videoUrl //视频播放地址
}],
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true,
durationDisplay: true, //视频时长时间显示
remainingTimeDisplay: false, //剩余时间显示
fullscreenToggle: true // 全屏按钮
},
errorDisplay: false, //错误显示
posterImage: false, //视频的预览海报图片显示
bigPlayButton: true, //视频中间的播放按钮显示
textTrackDisplay: false
}
// 视频初始化
this.player = this.$video(this.$refs.videoPlayer, this.options);
this.player.play();
}
</script>
到这一步视频就可以播放了，因为我们项目的视频是m3u8格式，在设置sources的时候，type需要设置为application/x-mpegURL，目前使用已知支持的视频格式有mp4、rtmp、flv还有目前正在使用的m3u8，其他格式需要各位看官自行搜索是否是否支持了。同时，options可设置的不仅仅是上面的内容，通过文档可以查看其他设置，https://docs.videojs.com/tutorial-options.html#controls。
image.png
切换视频地址
我们项目里用到的是实时监控画面，所以需要切换不同的监控点，下面对于切换视频地址贴上简单的示例。
//HTML部分
<el-select v-model="videoUrl" placeholder="请选择" size="medium" @change="changeVideo">
<el-option v-for="item in videoOptions" :key="item.indexCode" :label="item.name" :value="item.url"></el-option>
</el-select>
//ts部分
<script lang="ts">
changeVideo() {
//1.切换视频直接替换sources里的src是无效的，需要将整个videojs替换，更改src
//2.通过dispose()方法销毁当前videojs实例
//3.通过父id查找视频需要添加的位置，创建一个video标签
//4.将创建好的videoappendChild()添加至父id下
this.player.dispose();
// 创建一个标签
var newVideo = document.createElement('video');
// 设置video标签的id，以便创建videojs实例
newVideo.setAttribute('id', 'myVideo');
// 设置新video的样式
newVideo.setAttribute('class', 'video-js vjs-default-skin vjs-big-play-centered');
// 通过id号获取newVideo的父节点（也就是上一级的节点）
var Fid = document.getElementById('fid');
Fid.appendChild(newVideo);
// 创建切换播放地址后的video实例
this.player = this.$video(‘myVideo’, this.options);
this.player.play();
}
</script>
到此，视频地址的切换功能也完成了。因为是实时监控视频，目前还有个问题还没解决，当视频播放到一定时间后，就会存在视频加载问题，会造成视频播放不够流畅，这个问题还在研究中，解决后会继续更新到这篇文章里。由于初次使用videoJS插件，还有很多功能不够熟悉需要继续研究，各位看官也可以直接在评论区进行交流。
