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

四、拓展阅读

相关推荐
万少2 分钟前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder3 分钟前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix14 分钟前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句14 分钟前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易15 分钟前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟22 分钟前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子28 分钟前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao1 小时前
网安-XSS-pikachu
前端·安全·网络安全
惊鸿2871 小时前
Taro3+小程序Canvas动态生成海报和二维码分享到朋友圈
前端
做梦都在学习前端1 小时前
发布一个monaco-editor 汉化包
前端·npm·vite