跨平台应用开发进阶(五十九):uni-app实现视屏播放小窗功能

一、前言

在业务功能开发过程中,需要实现视频直播、播放小窗功能。鉴于目前通过接入火山webSDK实现视频直播、点播功能。需要火山协助配合改造实现小窗功能。

uni-app插件市场也提供了若干插件,经试用效果并不友好。

画中画悬浮窗(视频) Ba-VideoPip存在以下问题:

其他的,例如画中画(全局)、支持为第三方播放器无缝添加、进度同步更新(andorid)原生系统自带播放器、支持为第三方播放器无缝添加画中画(全局) (ios)定价过高,且无任何用户提出使用效果,毕竟不是官方出品,实属不敢使用。

二、解决方案

火山侧给出在接入 web sdk前提下实现系统小窗建议: 1、调用系统小窗拉流:如在uni app下可调用系统小窗的API, 应用侧app中监听web view被销毁的事件,在监听火山web sdk页面被销毁时,获取直播拉流地址,调用系统小窗进行直播拉流; 2、调整webview容器大小:如应用侧可控制web view大小,火山方提供播放器的监听事件、应用侧抛出事件与火山通信、火山侧根据事件调整webview内播放器样式,应用侧控制自己的web view大小并置于系统上层。

三、实施方案

经过综合评估,决定采用视频播放器,插件ID:wrs-videoplayer)实现小窗播放功能。当检测到火山侧触发小窗功能时,自动调用wrs-videoplayer的小窗播放功能,同时隐藏原播放页的视频播放。

注⚠️:由于wrs-videoplayer不支持rtmp直播流,需要提供m3u8格式的直播流。且存在以下问题:

四、拓展阅读

相关推荐
不是吧这都有重名19 分钟前
利用systemd启动部署在服务器上的web应用
运维·服务器·前端
霸王蟹20 分钟前
React中巧妙使用异步组件Suspense优化页面性能。
前端·笔记·学习·react.js·前端框架
Maỿbe29 分钟前
利用html制作简历网页和求职信息网页
前端·html
森叶1 小时前
Electron 主进程中使用Worker来创建不同间隔的定时器实现过程
前端·javascript·electron
霸王蟹1 小时前
React 19 中的useRef得到了进一步加强。
前端·javascript·笔记·学习·react.js·ts
霸王蟹1 小时前
React 19版本refs也支持清理函数了。
前端·javascript·笔记·react.js·前端框架·ts
繁依Fanyi1 小时前
ColorAid —— 一个面向设计师的色盲模拟工具开发记
开发语言·前端·vue.js·编辑器·codebuddy首席试玩官
明似水2 小时前
Flutter 开发入门:从一个简单的计数器应用开始
前端·javascript·flutter
沐土Arvin2 小时前
前端图片上传组件实战:从动态销毁Input到全屏预览的全功能实现
开发语言·前端·javascript
爱编程的鱼3 小时前
C#接口(Interface)全方位讲解:定义、特性、应用与实践
java·前端·c#