视频监控

1、官网下载js包

https://open.ys7.com/mobile/download.html

2、（把下载好的ezuikit.js、 js包）放进vue 的 static 下

3、在index.html引入

<script src="static/ezuikit.js"></script>

4、关闭eslint

config/index.js   

useEslint: false, // (设置为false） 

5、组件中使用

<videoid='myPlayer'src='你的视频播放地址'controls // 是否使用控制器 autoplay //是否自动播放
></video>

<script>     let palyersetTimeout(function(){ player=new EZUIKit.EZUIPlayer('myPlayer')},2) // 注意：因为vue项目是一次性读取数据，初始化的时候要设延迟，不然会报找不到dom             palyer.stop() // 页面跳转时注意关闭视频流，vue跳转原有任务不会停止   
</script> 

完整的代码如下：

<template><el-dialogappend-to-bodydestroy-on-close:title="videoname":visible="show"top="10vh"width="40%":before-close="handleClose"><divclass="videoPlayerOnline"v-loading.fullscreen="loading"element-loading-text="加载中,请稍后......"element-loading-background="rgba(0, 0, 0, 0.8)"><div id="myPlayer" class="myplayer" ref="myPlayer"></div></div></el-dialog>
</template><script>
export default {props: {addOrUpdateVisible: {type: Boolean,default: false},videoname:{type:String,default:"",},videourl:{type:String,default:"",},videotoken:{type:String,default:"",}},data() {return {projId: 56800,loading: false,player: null,show: false}},watch: {// 监听 addOrUpdateVisible 改变addOrUpdateVisible(oldVal, newVal) {this.show = this.addOrUpdateVisible;if (this.show == true) {this.$nextTick(() => {this.initVideoPlayer(this.videoname,this.videourl,this.videotoken);})}}},mounted() {},methods: {handleClose(done) {if (this.player.stop) {this.player.stop();this.player = null;}this.$emit("changeShow", "false");done();},//初始化视频initVideoPlayer(name,url,token) {this.loading = true;this.videoname = name;if (this.player) {this.player.stop();this.player = null;}// console.log(this.$refs.myPlayer);zzthis.player = new EZUIPlayer({id: "myPlayer",url: url,accessToken: token,// url: "ezopen://open.ys7.com/D76895974/7.live", // 监控地址// accessToken: "at.8lz1o5grbxjtbc118f5awz4n8edfqpnm-2a3a3xrudd-08r5q74-gxlc6toxn", //通过官网或接口获取的accesstokenwidth: this.$refs.myPlayer.offsetWidth - 2,height: this.$refs.myPlayer.offsetHeight - 2,autoplay: true,decoderPath: "/static", //*必填，请填写ezuikit绝对路径handleError: error => {this.loading = false;// console.log("播放错误回调函数，此处可执行播放成功后续动作");},handleSuccess: () => {this.loading = false;// console.log("播放成功回调函数，此处可执行播放成功后续动作");}})// 这里是打印日志，本例抛出到播放页面// this.player.on('log', str => {//   console.log((new Date()).Format('yyyy-MM-dd hh:mm:ss.S') + JSON.stringify(str))// })}}
}
</script><style lang="scss" scoped>
.videoPlayerOnline {height: 48vh;display: flex;font-size: 1rem;padding-bottom: 20px;.myplayer {flex: 1;}
}
</style>