更新记录

1.0.1（2023-11-15） 下载此版本

发布

平台兼容性



lq-hkvideo

海康视频H5播放器组件

组件大小默认填充父元素(100%,100%)

Props

Event

方法 通过实例调用例如：this.$refs.hkvideo.setLayout(2);

demo

<template>
    <view class="content">
        <view class="video-box">
            <hk-video ref="hkvideo" @change="onWindChange" @previewChange="onPreviewChange"></hk-video>
        </view>
        <view class="opt-btn">
            <button @click="startPreview">预览</button>
            <button @click="setLayout(1)">1x1</button>
            <button @click="setLayout(2)">2x2</button>
            <button @click="setLayout(3)">3x3</button>
            <button @click="setLayout(4)">4x4</button>
            <button @click="setFullScreen(true)">全屏</button>
        </view>

    </view>
</template>

<script>
    import hkVideo from '@/components/hk-video/index.vue'
    export default {
        components: {
            hkVideo,
        },
        data() {
            return {
                previewUrl: 'ws://192.xx.xx.xx:xxx/openUrl/he7HlcI',//实际对接从海康接口获取
            }
        },

        methods: {
            //预览
            startPreview() {
                this.$refs.hkvideo.startPreview(this.previewUrl, '测试设备').then(()=>{
                   console.log('预览成功')
                })
            },
           //分屏
            setLayout(layout) {
                this.$refs.hkvideo.setLayout(layout)
            },
            //是否全屏
            setFullScreen(n) {
                this.$refs.hkvideo.isFullScreen(false)
            },
           //选中窗口
            onWindChange(index) {
                console.log(index, 'windIndex')
            },
          //窗口预览改变
            onPreviewChange(e){
             console.log(e,'previewChange') 
            }

        }
    }
</script>

注意说明

本组件使用需要提前下载海康视频官方资源包（H5视频播放器开发包）放入项目/static/lib目录下（新建lib文件夹），下载地址

把资源包里的playctrl1、playctrl2、playctrl3、talk、talkW、transform、h5player.min.js复制到static/lib目录下。然后新增模板文件template.htmll引入h5player.min.js

新增模板文件方法：查看 引入js： template.html添加

<script  src="static/lib/h5player.min.js"></script>