引入相关依赖

 

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"></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)})},}