海康视频WEB插件

引入相关依赖

 

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); 
    }
}