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

相关推荐
codingWhat9 小时前
小程序里「嵌」H5:一套完整可落地的 WebView 集成方案
前端·uni-app·webview
小时前端2 天前
微信小程序选不了本地文件?用 web-view + H5 一招搞定
前端·微信小程序·uni-app
Mr_li2 天前
给 Vue 开发者的 uni-app 快速指南
vue.js·uni-app
anyup2 天前
🔥2026最推荐的跨平台方案:H5/小程序/App/鸿蒙,一套代码搞定
前端·uni-app·harmonyos
Mintopia3 天前
Vue3 项目如何迁移到 uni-app x:从纯 Web 到多端应用的系统指南
uni-app
Mintopia3 天前
uni-app x 发展前景技术分析:跨端统一的新阶段?
uni-app
不爱说话郭德纲4 天前
告别漫长的HbuilderX云打包排队!uni-app x 安卓本地打包保姆级教程(附白屏、包体积过大排坑指南)
android·前端·uni-app
HashTang5 天前
【AI 编程实战】第 12 篇:从 0 到 1 的回顾 - 项目总结与 AI 协作心得
前端·uni-app·ai编程
JunjunZ5 天前
uniapp 文件预览:从文件流到多格式预览的完整实现
前端·uni-app
郑州光合科技余经理6 天前
代码展示:PHP搭建海外版外卖系统源码解析
java·开发语言·前端·后端·系统架构·uni-app·php