当前位置: 首页 > news >正文

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

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

http://www.lryc.cn/news/151763.html

相关文章:

  • 使用proxy_pool来为爬虫程序自动更换代理IP | 开源IP代理
  • 【易售小程序项目】修改“我的”界面前端实现;查看、重新编辑、下架自己发布的商品【后端基于若依管理系统开发】
  • Centos7 + Apache Ranger 2.4.0 部署
  • 硬件SPI口扩展
  • 【jsthree.js】全景vr看房进阶版
  • 实战:基于卷积的MNIST手写体分类
  • Ubuntu开启生成Core Dump的方法
  • git视频教程Jenkins持续集成视频教程Git Gitlab Sonar教程
  • 机器学习:Xgboost
  • 《Kubernetes部署篇:Ubuntu20.04基于二进制安装安装cri-containerd-cni》
  • [CISCN 2019初赛]Love Math
  • 运行命令出现错误 /bin/bash^M: bad interpreter: No such file or directory
  • 码农重装系统后需要安装的软件
  • Kotlin return 和 loop jump
  • 计算一组数据中的低中位数即如果一组数据中有两个中位数则较小的那个为低中位数statistics.median_low()
  • ChatGPT是否能够协助人们提高公共服务和社区建设能力?
  • 机器人中的数值优化(七)——修正阻尼牛顿法
  • 程序员自由创业周记#3:No1.作品
  • 固定资产制度怎么完善管理?
  • 神经网络--感知机
  • Java“牵手”1688图片识别商品接口数据,图片地址识别商品接口,图片识别相似商品接口,1688API申请指南
  • 科技资讯|微软获得AI双肩包专利,Find My防丢背包大火
  • 数学建模:多目标优化算法
  • arcmap 在oracle删除表重新创建提示表名存在解决放啊
  • 新版HBuilderX在uni_modules创建搜索search组件
  • Ubutnu允许ssh连接使用root与密码登录
  • MySQL中表的设计
  • UE4/5在蓝图细节面板中添加函数按钮(蓝图与c++的方法)
  • Python爬虫乱码问题之encoding和apparent_encoding的区别
  • Docker技术--Docker简介和架构