uniapp实现H5、APP、微信小程序播放.m3u8监控视频

       

目录

1.APP播放.m3u8监控视频

2.H5播放.m3u8监控视频

3.微信小程序播放.m3u8监控视频

---

       最近在写一个uniapp实现h5、app、微信小程序兼容三端的播放监控视频功能，我原本以为一套代码多处运行，但事实并非如此，h5可以运行，微信小程序不一定可以运行，APP也是如此。上网查阅很多资料，最终3端效果实现成功。

1.APP播放.m3u8监控视频

APP对原生支持比较好，可以直接使用uniapp官网的video组件，本人亲自试过正常播放。

video地址：uni-app官网

代码实现如下：

代码还是比较简单的，将videoUrl替换成自己的.m3u8格式Url即可。

2.H5播放.m3u8监控视频

       这里一开始我也以为直接使用上面的代码就可以，但是uniapp运行起来发现根本播放不出来，虽然 HTML5 视频播放器支持多种视频格式，但并不是所有的浏览器都支持 .m3u8 格式的视频流。确保您使用的浏览器支持 HLS。我上网查阅资料最终效果实现成功!

实现代码：

本人亲自实践，电脑浏览器，与手机浏览器访问，都可以成功。

3.微信小程序播放.m3u8监控视频

     在这里我是卡的最久的，因为直接使用video组件播放，在微信开发者工具中可以正常播放，但是在真机调试，小程序查看就是一直黑屏转圈圈，有时候可以播放成功，但是几秒中过后就是又是一直转圈圈，最后就会报错。有大佬会的可以在下方留言，最后采用web-view组件，实现播放，直接页面跳转。但是使用web-view跳转监控视频，又会有另一个问题，本地测试正常，但是上线，线上微信小程序就会出现提示不支持打开该页面。一定得在微信开发者后台校验文件才可以打开，因为这是微信小程序的强制规则，这个校验文件必须放在对应服务器才可以成功，假如我是调整萤石云的监控，那按照微信的说法，就要将校验文件放入萤石云服务器的后台，这样显然不现实，所以这里有两种方案，第一使用代理，第二自己在写一个页面部署到自己的服务器，通过web-view跳转到自己写的页面中，将监控视频url一并传入页面，即可完成播放。

实现代码：

注意，这里跳转必须是https，在这里viderUrl是视频监控的链接，cameraTitle是标题，比如你播放的是那个监控，可加可不加，我这边是加上了。

跳转playeer.html页面代码实现：
其实下面的代码保存，videoUrl替换即可播放,我只不过写了两套，你们可以选择一套使用。

本人亲自测试，3端都可以播放，有问题可以在下方评论留言。