海康视频WEB插件

引入相关依赖

   

   index.html

1. <script src="/video/web-control_1.2.5.min.js"></script>
2. <script src="/video/jquery-1.12.4.min.js" type="text/javascript"></script>
3. <script src="/video/jsencrypt.min.js" type="text/javascript"></script>

复制代码

  全局设置参数

1. <script>
2.     window._CONFIG = {
3.         appKey:"XXXXXXXXX",
4.         secret:"XXXXXXXXXXXX",
5.         hikIp:'xxx.xxx.xxx.xx',
6.         apiPort:'XXXX',
7. };
8. </script>

复制代码

  页面

1. <div class="backWidth play_box" ref="backWidth">
2.         <a-row type="flex" justify="space-around" align="middle">
3.                 <a-spin v-show="spinFlag" tip="加载中请稍后......" />
4.         </a-row>
5.         <a-row class="play_box">
6.                 <div id="playWnd" class="playWnd" ref="barparent"></div>
7.         </a-row>
8. </div>

复制代码

1. <script>
2. import {playMixin} from '@/utils/playMixinNew.js';
3. export default {
4.     mixins: [playMixin],
5.     data() {
6.         return {
7.             windowHeight: 0,
8.             curPlayMode:0,
9.         },
10.     mounted() {
11.         //计算窗口高度
12.         this.getWindowHeight();
13.         // 在窗口大小改变时重新获取窗口高度
14.         window.addEventListener('resize', this.getWindowHeight);
15.     },
16.     methods: {
17.         getWindowHeight() {
18.             this.windowHeight = window.innerHeight - 355;
19.         },
20.         // 切换实时视频和历史视频
21.         changePlay(value,playMode){
22.             if(playMode !== this.curPlayMode){
23.               this.closeWindow();
24.               setTimeout(()=>{
25.                 this.openPlayer(value,playMode)
26.               },200)
27.             }
28.         },
29.         // 打开海康视频插件
30.         openPlayer(value,playMode=0){
31.             this.curPlayMode = playMode;
32.             this.$nextTick(()=>{
33.                 this.initparam.layout = '1x1'
34.                 this.spinFlag = true;
35.                 this.initPlugin({playMode:this.curPlayMode});
36.                 setTimeout(()=>{
37.                     if(this.curPlayMode){
38.                         console.log('进入视频回放')
39.                         this.startPlayBack(value)
40.                     }else{
41.                         console.log('进入视频预览')
42.                         this.startpreview(value);
43.                     }
44.                 },2000)
45.             })
46.         },
47.     }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。