uni-app app端.m3u8类型流的播放

本文介绍了如何在uni-app开发环境中,利用web-view嵌入H5页面实现M3U8视频流自动播放,特别关注了在Android和iOS上的兼容性问题,以及如何解决iOS全屏弹窗播放的问题。

1.开发环境:HBuilderX3.8.7、uni-app、vue2.0、view2.0、uni-ui
2.实现通过web-view 嵌入H5页面,进行视频流自动播放。
注意事项:
如果只是在android端可以直接使用.flv格式的视频流;
如果App需要支持ios就可以考虑一下播放.m3u8格式的视频流,本文主要写的是播放.m3u8格式的视频流;
如果直接在.vue文件通过flv.js的方式实现,由于uni-app封装问题,可能会遇到原生dom元素获取问题;
3.为什么使用web-view嵌入H5页面的方式呢?
H5中获取原生dom方便,通过flv.js实现在android端播放.flv格式的视频流
video标签可以直接播放.m3u8格式的视频流,经测试发现.m3u8格式的视频流android和ios都支持
4.具体实现
在.vue页面引入web-view⚠️如果是本地资源必须放在uni-app 项目根目录->hybrid->html文件夹下,或者static目录下,主要代码

<web-view src="/hybrid/html/video.html" :fullscreen="false"></web-view>

video.html文件

<video id="video-container" controls autoplay="autoplay" style="height: 500px;width: 100%;" src = "视频流的地址"></video>

完成上述内容,已经可以自动播放视频流
在ios端可能会出现弹出一个新的框播放视频流,可以通过给video 添加 x5-video-player-fullscreen=“true” x5-playsinline playsinline 属性,如果还不行,那就去上网搜搜吧,我的是通过这三个属性已经解决了问题

Uni-app 中实现 HLS(HTTP Live Streaming)视频播放,主要依赖于第三方库或原生组件的支持,因为 Uni-app 自带的 `<video>` 组件对 HLS 的支持有限,尤其是在 H5 。以下是几种可行的实现方法: ### 1. 使用 `hls.js` 库实现 H5 HLS 播放 `hls.js` 是一个由 Video.js 团队维护的开源库,能够在浏览器中播放 HLS 。可在 Uni-app 的 H5 页面中引入该库,并结合 HTML5 `<video>` 标签进行播放。 ```html <template> <view> <video :src="videoSrc" ref="videoElement"></video> </view> </template> <script> import Hls from 'hls.js'; export default { data() { return { videoSrc: 'https://your-domain.com/path/to/video.m3u8' }; }, mounted() { const video = this.$refs.videoElement; if (Hls.isSupported()) { const hls = new Hls(); hls.loadSource(this.videoSrc); hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED, () => video.play()); } } }; </script> ``` ### 2. 使用原生组件或插件实现多支持 对于 App 和小程序平台,建议使用封装好的原生播放器插件,例如: - **uni.createVideoContext**:Uni-app 提供的原生视频上下文 API,适用于部分支持 HLS 的平台。 - **自定义原生组件**:在 Android/iOS 上使用 ExoPlayer 或 AVPlayer 实现 HLS 播放,并通过 Uni-app 插件机制调用[^1]。 ### 3. 使用第三方组件库 一些社区开发的组件库已经集成了 HLS 支持,例如: - **vue-hls-player**:基于 Vue 封装的播放器组件,可适配 Uni-app 的 H5 - **xgplayer-hls.js**:西瓜播放器的 HLS 插件版本,兼容性较好。 ### 4. 接入海康威视 H5Player 实现监控播放 如果应用场景涉及安防监控视频(如 RTSP 转 HLS),可以参考接入海康威视提供的 H5Player SDK,并通过 WebSocket 获取视频地址[^2]。此类方式适合企业级应用开发。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值