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))
					});
			},
		}
相关推荐
AI视频工具指南8 小时前
怎么用 AI 做节日祝福视频?
人工智能·音视频·节日
Flynn Liang13 小时前
Spring AI 多模态实战(下):文生图 + TTS 语音合成(含 2.0 流式音频分片)
人工智能·spring·文生图·音视频·语音合成·tts·springai
自养Agent15 小时前
AI 私有化实战:多模态本地化·视觉与音频怎么装下
人工智能·大模型·llm·音视频·语音识别
lm down15 小时前
IndexTTS 2/2.5 轻量版、Qwen3-TTS 轻量版:支持AMD、Intel、NVIDIA显卡和Mac,2GB显存可跑
人工智能·ai·音视频·tts
youdexiang16 小时前
IOS录音APP拍照记录能和音频同步吗
ios·音视频
9527华安17 小时前
FPGA基于ADV7182解码PAL视频,Video Processing Subsystem去隔行,提供6套工程源码和技术支持
fpga开发·音视频·pal·adv7182
vjmap17 小时前
AI 地图动画-以真实地图为画布的 AI 视频编辑器-唯杰 AI 地图动画正式上线
人工智能·编辑器·音视频·gis·cad
星核0penstarry17 小时前
视频理解模型选型指南:Gemini、Qwen、SeedRealtime 怎么选(附 API 示例)
人工智能·音视频·实时音视频·视频·gemini·vs qwen
小豆庄18 小时前
监控视频脱敏:夜视/低光线条件下人脸检测的工程处理思路
opencv·计算机视觉·阿里云·视觉检测·音视频·视频
微帧Visionular1 天前
AI视频单帧清晰,播放时却闪烁,原因是什么?
人工智能·深度学习·音视频