uniapp使用海康h5player并接入hls、ws、rtsp视频流

本文链接：https://blog.csdn.net/q866725/article/details/132732663

采用uniap中的render.js 引入海康sdk

接入流程：

1.将下载好的sdk放到项目根目录static文件中：

2.js中引用h5player.min.js 需使用相对路径引入（render.js开发文档：renderjs | uni-app官网）

3.html中编写dom元素时候需使用render.js传参方式将数据从逻辑层传到视图层

//fileurl：播放地址

<view id="play_window" class="videoSty" :fileurl="fileurl" :change:fileurl="renderTest.fileurlMsg"></view>

<script lang="renderjs" module="renderTest">
   export default {
       data() {
           return {
               urls: '',
               rPlay: null
           }
       },
       methods: {
           foundWindow() {
               let play = null
               let playUrl = this.urls
               play = new JSPlugin({
                   szId: "play_window", //需要英文字母开头必填
                   szBasePath: "static/lib", // 必填,引用H5player.min.js的js相对路径
                   oStyle: {
                       border: "none",
                       borderSelect: "none",
                       background: "#000",
                   }
               });
               play.JS_Play(playUrl, {
                   playURL: playUrl,//监控地址
               }).then(
                   () => {
                       console.log('播放成功')
                   },
                   (e) => {
                       console.log('播放失败')
                   }
               )
           },
           fileurlMsg(n, v, s, z) {
               this.urls = n
               let that = this
               if (typeof window.JSPlugin === 'function') {
                   that.foundWindow();
               } else {
                   const script = document.createElement('script')
                   script.src = 'static/lib/h5player.min.js' //h5player.min.js 相对路径
                   script.onload = that.foundWindow.bind(this)
                   document.head.appendChild(script)
               };
           }

       },
   }
</script>