uniapp 悬浮窗-视频(自定义尺寸、多种拖动、静音)插件 Ba-FloatWinVideo

悬浮窗-视频 Ba-FloatWinVideo

简介(下载地址

Ba-FloatWinVideo 是一款视频悬浮窗插件。支持悬浮应用之上,或者应用内;支持自定义尺寸、位置和拖动方式;支持点播、直播;支持静音、暂停、重播、快进、后退;

  • 支持悬浮应用之上,或者应用内
  • 支持自定义悬浮窗尺寸大小
  • 支持多种拖动方式(不拖动、任意拖动、贴边拖动)
  • 支持设置显示位置
  • 支持点播、直播
  • 支持静音
  • 支持暂停
  • 支持重新播放
  • 支持快进、后退(点播)
  • 支持设置当前播放进度

可关注博客,实时更新最新插件

uniapp 常用原生插件大全


截图展示

使用方法

script 中引入组件

javascript 复制代码
	const floatWin = uni.requireNativePlugin('Ba-FloatWinVideo')

script 中调用(示例参考,可根据自己业务和调用方法自行修改)

javascript 复制代码
        methods: {
			showFW() { //显示
				floatWin.show({
						url: this.url, //视频地址
						//widthRatio: 0.6 f, //悬浮窗宽度(屏幕宽度比例,默认0.6)
						//heightRatio: 0.34 f, //悬浮窗高度(屏幕宽度比例,默认0.34)
						//xRatio: 0.8, //悬浮窗X轴位置(距离左上角,屏幕宽度比例,默认0.8)
						//yRatio: 0.7, //悬浮窗Y轴位置(距离左上角,屏幕高度比例,默认0.7)
						//moveType: 1,//拖动方式:1:不可拖动 2:任意拖动、3:贴边拖动。默认2
						//isRememberXY: false,//是否记住上次的位置。默认true
						//isPermission: false,//是否申请悬浮窗权限。默认true
						//isLive: false,//是否是直播,默认false
						//isMute: false,//是否静音播放,默认false
						//currentTime: 0,//当前播放进度,毫秒
					},
					(res) => {
						console.log(res);
						this.showToast(JSON.stringify(res))
					});
			},
			updateFW() { //更新数据
				floatWin.update({
						url: "", //视频地址
						restart: true,//是否重新播放,如果涉及视频设置,如url等,必须传true
						//isLive: false,//是否是直播,默认false
						//isMute: false,//是否静音播放,默认false
						//currentTime: 0,//当前播放进度,毫秒
						//widthRatio: 0.6 f, //悬浮窗宽度(屏幕宽度比例,默认0.6)
						//heightRatio: 0.34 f, //悬浮窗高度(屏幕宽度比例,默认0.34)
						//xRatio: 0.8, //悬浮窗X轴位置(距离左上角,屏幕宽度比例,默认0.8)
						//yRatio: 0.7, //悬浮窗Y轴位置(距离左上角,屏幕高度比例,默认0.7)
						//moveType: 1,//拖动方式:1:不可拖动 2:任意拖动、3:贴边拖动。默认2
					},
					(res) => {
						console.log(res);
						this.showToast(JSON.stringify(res))
					});
			},
			hideFW() { //隐藏
				floatWin.hide(
					(res) => {
						console.log(res);
						this.showToast(JSON.stringify(res))
					});
			},
		}
相关推荐
郑州光合科技余经理3 小时前
同城外卖小程序开发:下单成功后,后台导出能不能对上用户端状态
开发语言·前端·git·后端·uni-app·php·ai编程
赛博仓鼠3 小时前
秋叶ComfyUI 3.2整合包实测:Python 3.13+Torch 2.13全栈升级,一键跑通MiniMax H3(附完整部署)
ai·ai作画·aigc·音视频
乐橙开放平台5 小时前
从「多套客户端」到一套开放能力:乐橙视频监控能力复盘
笔记·物联网·自动化·音视频·智能家居
linux_cfan10 小时前
videojs v10 源代码系列解读:13 · 能力型媒体契约:`Media` 的组合接口
前端·javascript·音视频
勤劳X码农11 小时前
2026年TTS工具技术测评:7款方案实测,从免费额度到API集成全解析
人工智能·音视频·实时音视频
m0_6145235512 小时前
Log视频导入发灰,先查颜色链
音视频·视频编辑
白远山13 小时前
城市电竞陪玩调度系统实战:从派单算法到多端协同的架构拆解
java·架构·uni-app·需求分析
linux_cfan1 天前
17 · 引擎适配器全景:HLS/DASH/Vimeo/Mux/Cast
前端·javascript·音视频
音视频牛哥1 天前
视频编码的终局不是“更省码率”:从 H.266、AV2 到 AI 编解码的下一场竞争
音视频·h.266·rtsp h.266·h.266编解码·rtp h.266·rtp vvc·ai编解码
程序员老陆1 天前
WHIP 与 WHEP:WebRTC 直播的标准化入口与出口
ffmpeg·音视频·webrtc·whip·whep