海康视频WEB插件
引入相关依赖https://i-blog.csdnimg.cn/direct/1786eab7d99449498af93ed44cba5cca.png
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: ,
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)
})
},
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]