跨平台应用开发进阶(五十九):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格式的直播流。且存在以下问题:

四、拓展阅读

相关推荐
向宇it12 分钟前
fastadmin搜索刷新列表,怎么限制用户频繁点击?
开发语言·前端·javascript·fastadmin
Ylucius43 分钟前
常见服务器大全----都是什么?又有何作用?区别联系是什么?---web,应用,数据库,文件,消息队列服务器,Tomat,Nginx,vite.....
java·前端·javascript·chrome·学习·node.js·express
alicca2 小时前
递归手撕,JSON 字符串化和解析,加权树结构的字符串解析对象,解析并返回DOM 树结构(DOMParser),解析带有层级的文本
前端·javascript
李是啥也不会3 小时前
JavaScript中的输出方式
开发语言·前端·javascript
炒毛豆3 小时前
ant design vue中带勾选表格报Tree missing follow keys: ‘undefined‘解决方法
前端·javascript·vue.js
大多_C3 小时前
python中logging的用法
前端·python
林某人的代码日常3 小时前
前端之render函数的理解
前端·vue.js·react.js
isea5334 小时前
如何只用 CSS 制作网格?
前端·css
qiao若huan喜5 小时前
10_React router6
前端·react.js·前端框架
Ghost-995 小时前
mac 上配置Jmeter代理进行web脚本录制过程&容易踩坑的点
前端·网络·jmeter·macos·压力测试