uniapp 引入海康H5player实现视频监控的播放

uniapp直接调用海康H5player方法，只能在web浏览器页面正常播放，实机运行会因为找不到文件的相对路径而报错无法播放。因此需要通过web-view或iframe引入html的方式来实现实时视频监控的播放。具体步骤如下：

1、首先将海康h5player的相关文件，引入到static文件夹下，文件相对位置保持一致；

2、在H5player文件夹下新建html页面webplayer.html；

        （1）页面元素代码

        <div id="h5player" class="myplayer"></div>

        （2）页面样式代码

        <style type="text/css">
            html,
            body {
                width: 100%;
                height: 100%;
                margin: auto;
                overflow: hidden;
                background-color: #000000;
                -webkit-user-select: none;
                user-select: none;
            }

            .myplayer {
                width: 100%;
                height: 100%;
            }
        </style>

       * 此页面用来进行海康方法的调用和视频监控的播放。

       * 将页面与h5player.min.js放在同一路径下，防止实机运行出现路径错误的问题。

3、在webplayer.html页面引入h5player.min.js，并进行监控视频初始化配置；

 

 4、通过webview或iframe的形式将页面嵌入到需要进行监控视频展示的页面；

5、将接口请求到的视频流地址通过url拼接的方式传给webplayer.html页面；

 6、在webplayer.html页面通过解析url路径地址的方法获取视频播放流地址，并调用海康api的视频播放方法。

 

 7、实机运行，视频播放成功；（抓拍、摄像头移动等方法直接写在webplayer.html页面进行调用）