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

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目录下,主要代码

javascript 复制代码
<web-view src="/hybrid/html/video.html" :fullscreen="false"></web-view>

video.html文件

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

完成上述内容,已经可以自动播放视频流

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

相关推荐
RuoyiOffice6 小时前
SpringBoot+Vue3 实现 OA 公文外来文与归档台账:外部收文、BPM办理、三类公文统一归档
spring boot·微服务·uni-app·vue·ruoyi·anti-design-vue·ruoyioffice
云起SAAS1 天前
私域直播系统UniApp源码 多商户商城+直播带货 微信小程序+H5+安卓iOS
android·微信小程序·uni-app·私域直播系统
专科3年的修炼3 天前
uni-app移动应用开发第四章
开发语言·javascript·uni-app
q5507071773 天前
uniapp/uniappx实现原生图片编辑涂鸦、贴图、滤镜、旋转、裁剪等
uni-app
计算机学姐4 天前
基于微信小程序的校园失物招领管理系统【uniapp+springboot+vue】
java·vue.js·spring boot·mysql·信息可视化·微信小程序·uni-app
2501_915921434 天前
HTTPS前端劫持 新一代流量劫持解决方案
前端·网络协议·ios·小程序·https·uni-app·iphone
爱怪笑的小杰杰4 天前
优化 UniApp 日历组件的多语言切换:告别 setLocale 引起的 App 重启
java·前端·uni-app
计算机学姐4 天前
基于微信小程序的宠物服务系统【uniapp+springboot+vue】
java·vue.js·spring boot·mysql·微信小程序·uni-app·宠物
2501_915909064 天前
iOS应用签名的三种方法全解析:从官方到第三方工具
android·ios·小程序·https·uni-app·iphone·webview
心中无石马5 天前
uniapp引入tailwindcss4.x
前端·css·uni-app