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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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 属性,如果还不行,那就去上网搜搜吧,我的是通过这三个属性已经解决了问题

### UniApp 实现全分享功能 在UniApp开发环境中,为了实现在不同平台上的一致性体验,开发者可以利用`uni.share()` API来实现跨平台的分享功能。此API允许应用程序向用户的社交圈、好友或其他指定位置发送消息或链接。 对于具体的应用场景而言,在H5页面上可能通过浏览器自带的功能完成;而在微信小程序里,则会依赖于微信开放的能力来进行操作;至于原生APP环境(iOS 和 Android),则可以通过调用各自系统的分享组件达成目的[^1]。 下面是一个简单的例子展示如何配置并使用这个方法: ```javascript // 定义要共享的内容对象 const shareData = { provider: "weixin", // 分享渠道提供商, 如 weixin 微信朋友圈 wxfriend 微信好友 sinaweibo 新浪微博 tencentqq QQ空间 qq 好友 scene: "", // 场景参数仅当provider为'weixin'时有效 可选值 'WXSceneSession'(默认) 或者 'WXSenceTimeline' type: 0, // 类型 0: 自动识别(默认), 1: 图片, 2: 音频, 3: 视频, 4: 小程序卡片 (仅限微信) href: "https://example.com/", // 要分享链接的目标URL title: "这是一个测试标题", summary: "这是描述文字。", imageUrl: "https://example.com/image.png" }; function doShare() { uni.share({ ...shareData, success(res) { console.log('成功:', res); }, fail(err) { console.error('失败:', err); } }); } ``` 需要注意的是,不同的平台可能会有不同的限制条件以及额外的要求。例如,在某些情况下,您还需要设置相应的权限声明或者注册特定的服务账号才能正常使用这些特性[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值