引入相关依赖
index.html
<script src="/video/web-control_1.2.5.min.js"></script>
<script src="/video/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="/video/jsencrypt.min.js" type="text/javascript"></script>
全局配置参数
<script>
window._CONFIG = {
appKey:"XXXXXXXXX",
secret:"XXXXXXXXXXXX",
hikIp:'xxx.xxx.xxx.xx',
apiPort:'XXXX',
};
</script>
页面
<div class="backWidth play_box" ref="backWidth">
<a-row type="flex" justify="space-around" align="middle">
<a-spin v-show="spinFlag" tip="加载中请稍后......" />
</a-row>
<a-row class="play_box">
<div id="playWnd" class="playWnd" ref="barparent" :style="{ height: windowHeight + 'px' }"></div>
</a-row>
</div>
<script>
import {playMixin} from '@/utils/playMixinNew.js';
export default {
mixins: [playMixin],
data() {
return {
windowHeight: 0,
curPlayMode:0,
},
mounted() {
//计算窗口高度
this.getWindowHeight();
// 在窗口大小改变时重新获取窗口高度
window.addEventListener('resize', this.getWindowHeight);
},
methods: {
getWindowHeight() {
// 具体减去多少根据实际效果可以微调
this.windowHeight = window.innerHeight - 355;
},
// 切换实时视频和历史视频
changePlay(value,playMode){
if(playMode !== this.curPlayMode){
this.closeWindow();
setTimeout(()=>{
this.openPlayer(value,playMode)
},200)
}
},
// 打开海康视频插件
openPlayer(value,playMode=0){
this.curPlayMode = playMode;
this.$nextTick(()=>{
this.initparam.layout = '1x1'
this.spinFlag = true;
this.initPlugin({playMode:this.curPlayMode});
setTimeout(()=>{
if(this.curPlayMode){
console.log('进入视频回放')
this.startPlayBack(value)
}else{
console.log('进入视频预览')
this.startpreview(value);
}
},2000)
})
},
destroyed() {
// 组件销毁时移除resize事件监听器
window.removeEventListener('resize', this.getWindowHeight);
}
}