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))
					});
			},
		}
相关推荐
山海青风2 小时前
藏文TTS介绍:6 MMS 项目的多语言 TTS
人工智能·python·神经网络·音视频
游戏开发爱好者82 小时前
抓包工具有哪些?代理抓包、数据流抓包、拦截转发工具
android·ios·小程序·https·uni-app·iphone·webview
Everbrilliant895 小时前
FFmpeg解码OpenSL、ANativeWindow播放实现音视频同步
ffmpeg·音视频·opensl音视频同步播放·音视频同步播放·唇音同步·音视频时钟漂移·播放时钟同步
郑州光合科技余经理6 小时前
技术解析:如何打造适应多国市场的海外跑腿平台
java·开发语言·javascript·mysql·spring cloud·uni-app·php
一点晖光7 小时前
ffmpeg实现图片转视频效果
ffmpeg·音视频
前端 贾公子7 小时前
uniapp之实现拖拽排序
uni-app
咕噜船长7 小时前
使用Qwen3-VL模型批量标注视频内容(视频理解)
人工智能·pytorch·深度学习·音视频·视频
音视频牛哥7 小时前
内网RTSP直连 + 公网RTMP上云:基于SmartMediakit的 Android双引擎架构设计
音视频·安卓rtsp服务器·安卓轻量级rtsp服务·安卓rtsp摄像头推流·安卓摄像头rtmp推流·安卓 camera2 rtsp·安卓camera2 rtmp
一室易安7 小时前
uniapp vue3 小程序中 手写模仿京东淘宝加入购物车红点曲线飞入样式效果 简化版代码
小程序·uni-app
二等饼干~za8986688 小时前
碰一碰发视频系统源码开发搭建--技术分享
java·运维·服务器·重构·django·php·音视频