uniapp 引入海康H5player实现视频监控的播放-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 引入海康H5player实现视频监控的播放。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

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>