uniapp 画中画悬浮窗(视频) Ba-VideoPip

news2024/12/23 8:57:37

简介(下载地址)

Ba-VideoPip 是一款画中画方式的视频悬浮窗插件。支持点播、直播;支持官方、三方播放器无缝切换;支持动态刷新(如切换视频或进度)。

  • 支持点播、直播
  • 支持官方、三方播放器无缝切换
  • 支持动态刷新(如切换视频或进度)
  • 支持检测是否支持画中画
  • 支持检测画中画开关是否打开
  • 支持检测画中画是否打开(本插件)
  • 支持页面关闭画中画
  • 支持监听事件,如关闭、返回、视频播放完成等

截图展示

在这里插入图片描述

使用方法

script 中引入组件

	const videoPip = uni.requireNativePlugin('Ba-VideoPip')

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

	const videoPip = uni.requireNativePlugin('Ba-VideoPip')
		export default {
		data() {
			return {
				msgList: [],
				currentTime: 0,
				url: '测试链接1.mp4',
				urls: [
					"测试链接1.mp4",
					"测试链接2.m3u8"
				],
				custom: "/pages/video/video"
			}
		},
		methods: {
			startPip(url = this.url) {
				let that = this;
				videoPip.startPip({
						url: url, //视频地址
						currentTime: this.currentTime, //当前播放时长
						isLive: false, //是否是直播,默认false
						custom: this.custom, //自定义参数
					},
					res => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
			restart() { //重新播放,(也可更改参数,用于切换)
				let that = this;
				videoPip.restart({
						url: this.url,
						currentTime: this.currentTime
					},
					res => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
			isSupportPip() {//是否支持画中画
				let that = this;
				videoPip.isSupportPip(
					res => {
						console.log(res);
						if (res.data) {
							uni.showToast({
								title: "isSupportPip:" + res.data.isSupportPip,
								icon: "none",
								duration: 3000
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 3000
							})
						}
					});
			},
			isOpenEnable() {//画中画开关是否打开
				let that = this;
				videoPip.isOpenEnable(
					res => {
						console.log(res);
						if (res.data) {
							uni.showToast({
								title: "isOpenEnable:" + res.data.isOpenEnable,
								icon: "none",
								duration: 3000
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 3000
							})
						}
					});
			},
			isStart() {//画中画是否打开(本插件)
				let that = this;
				videoPip.isStart(
					res => {
						console.log(res);
						if (res.data) {
							uni.showToast({
								title: "isStart:" + res.data.isStart,
								icon: "none",
								duration: 3000
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 3000
							})
						}
					});
			},
			closePip() { //关闭画中画
				let that = this;
				videoPip.closePip(
					res => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
		}
	}

后台时点击事件监听

在应用生命周期app.vue的onLaunch事件中设置监听:

        onLaunch: function() {
			var globalEvent = uni.requireNativePlugin('globalEvent');
			globalEvent.addEventListener('baVideoPipEvent', function(e) {
				console.log('baVideoPipEvent' + JSON.stringify(e));
				//示例:{"url":"测试地址1.mp4","action":3,"custom":"/pages/video/video","currentTime":0}
				//url:视频地址
				//action: 1:关闭 2:放大返回 3:播放完成
				//currentTime: 当前播放时间,仅action=2有效
				//custom:自定义参数
			});
		},
		onShow: function() {
		},
		onHide: function() {
		}

api 列表

方法名说明
startPip打开画中画
isSupportPip是否支持画中画
isOpenEnable画中画开关是否打开
isStart是否已经打开
restart重新播放,(也可更改参数,用于切换)
closePip关闭画中画

startPip 方法参数

打开画中画

属性名类型必填默认值说明
urlStringtrue视频地址
currentTimeNumbertrue0当前播放时长(毫秒)
isLiveBooleanfalsefalse是否是直播,默认false
customStringtrue自定义参数

restart 方法参数

重新播放,(也可更改参数,用于切换),参数同 startPip

系列插件

图片选择插件 Ba-MediaPicker (文档)

图片编辑插件 Ba-ImageEditor (文档)

文件选择插件 Ba-FilePicker (文档)

应用消息通知插件(多种样式,新增支持常驻通知模式) Ba-Notify(文档)

应用未读角标插件 Ba-Shortcut-Badge (文档)

应用开机自启插件 Ba-Autoboot(文档)

扫码原生插件(毫秒级、支持多码)Ba-Scanner-G(文档)

扫码原生插件 - 新(可任意自定义界面版本;支持连续扫码;支持设置扫码格式)Ba-Scanner(文档)

动态修改状态栏、导航栏背景色、字体颜色插件 Ba-AppBar(文档)

原生sqlite本地数据库管理 Ba-Sqlite(文档)

安卓保活插件(采用多种主流技术) Ba-KeepAlive(文档)

安卓快捷方式(桌面长按app图标) Ba-Shortcut(文档)

自定义图片水印(任意位置) Ba-Watermark(文档)

最接近微信的图片压缩插件 Ba-ImageCompressor(文档)

视频压缩、视频剪辑插件 Ba-VideoCompressor(文档)

动态切换应用图标、名称(如新年、国庆等) Ba-ChangeIcon(文档)

原生Toast弹窗提示(穿透所有界面、穿透原生;自定义颜色、图标 ) Ba-Toast(文档)

图片涂鸦、画笔 Ba-ImagePaint(文档)

pdf阅读(手势缩放、显示页数) Ba-Pdf(文档)

声音提示、震动提示、语音播报 Ba-Beep(文档)

websocket原生服务(自动重连、心跳检测) Ba-Websocket(文档)

短信监听(验证码) Ba-Sms(文档)

智能安装(自动升级) Ba-SmartUpgrade(文档)

监听系统广播、自定义广播 Ba-Broadcast(文档)

监听通知栏消息(支持白名单、黑名单、过滤) Ba-NotifyListener(文档)

全局置灰、哀悼置灰(可动态、同时支持nvue、vue) Ba-Gray(文档)

获取设备唯一标识(OAID、AAID、IMEI等) Ba-IdCode(文档)

实时定位(系统、后台运行、支持息屏)插件 Ba-Location(文档)

窗口小工具、桌面小部件、微件 Ba-AppWidget(文档)

画中画悬浮窗(视频) Ba-VideoPip(文档)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/155024.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【unity3D】Collider碰撞器组件

💗 未来的游戏开发程序媛,现在的努力学习菜鸡 💦本专栏是我关于游戏开发的学习笔记 🈶本篇是unity的Collider碰撞器组件 Collider碰撞器组件▶碰撞器类别▶Box Collider▶Sphere Collider▶Box Collider 2D▶Composite Collider 2…

Aspose.Words for .NET Crack 23.1.0

Aspose.Words for .NET Crack Aspose.Words 及其产品系列是一组 Word 文档,它们处理 API 以创建、编辑、打印、阅读和稍后转换所有格式化的 Word 文档和文件格式,就在 .NET、Java、Android 中、Cloud、SSRS、SharePoint 以及最后但并非最不重要的 Jasper…

【fpdlink显示】DS90UB948关于941连接948 GPIO调试问题

1. 前言 使用一个941连接2 948显示: 941的GPIO0/1/2/3到前948的GPIO0/1/2/3和941的D_GPIO0/1/2/3到948的GPIO0/1/2/3。 设置gpio3输出,则941的D_GPIO3设置高,而948的gpio3设置不高; 但设置gpio3输入后,看到941的D_GPIO3跟随948的gpio3变化。 2. 原理图连接 3. 测试代码…

通过图像了解 Git

我受到Nico Riedmann 的 Learn git concepts, not commands 的启发,我用我自己的方式总结了 git。当然,我也通过阅读官方文档来补充它。从系统结构上理解git,让git更有趣。我最近对 git 上瘾了,以至于我正在创建自己的 git 系统。…

Java集合常见面试题(一)

集合概述 Java 集合, 也叫作容器,主要是由两大接口派生而来:一个是 Collection接口,主要用于存放单一元素;另一个是 Map 接口,主要用于存放键值对。对于Collection 接口,下面又有三个主要的子接…

HarmonyOS智能座舱体验是怎样炼成的?立即查看

目录 一、智能座舱的人因设计理念 1.驾驶场景“2s内安全交互” 2.屏幕信息科学布局 3.屏幕1:2比例特色分屏 二、如何对座舱应用高效设计开发 1.基础要求 2.开发禁止 3.更佳体验 1.音频类应用快速接入 2.手机服务卡片快速适配 三、软硬件联合打造优秀体验 1.小憩模式 2.K歌体验 …

RepVGG:让VGG风格的ConvNets再次伟大

论文地址:https://arxiv.org/abs/2101.03697 我们提出了一种简单但功能强大的卷积神经网络结构,该模型在推理时类似于VGG,只有33的卷积和ReLU堆叠而成,而训练时间模型具有多分支拓扑结构。训练时间和推理时间结构的这种解耦是通过…

李宏毅ML-局部最小值与鞍点

局部最小值与鞍点 文章目录局部最小值与鞍点1. Optimization 没有做好是因为什么?2. Local Minima or Saddle Point?3. 如何解决 Saddle Point?1. Optimization 没有做好是因为什么? 观察下图,随着 update 的次数增加&#xff0…

MFC或C/C++中如何判断目录存在,文件/文件夹存在,亦或是文件夹存在,文件存在

判断的方式太多太多,这里暂时列举5中方式。 在文章开始之前,由于需要用到CString转char功能,所以先介绍一个CString转char的方法: 想知道更多参见CString与char *互转总结 由于本文使用的Unicode编码模式,所以如下&…

链动2+1商业模式的玩法是怎么样的?

如果你感觉自己的产品卖不掉,很可能是因为缺乏一种成功业务模型,因此我们来聊聊运营商业运营模式理论:从一个销售产品到一个商业运营模式的高速发展,我们不能把它简单的当做是一种营销方法,也就是一种产品的营销方法。…

六、MySQL 数据库练习题1(包含前5章练习题目及答案)

文章目录一、数据库概述练习题二、MySQL 环境搭建练习题三、查询练习MySQL 数据库练习题(包含前5章所有知识点及答案) 前置知识: 一、数据库开发与实战专栏导学及数据库基础概念入门 二、MySQL 介绍及 MySQL 安装与配置 三、MySQL 数据库的基本操作 四、MySQL 存储…

PrimalSQL 2023 Crack

PrimalSQL 2023 使数据库查询开发和测试变得轻而易举,无论您的数据库类型或供应商如何。 通过单个工具支持多个数据库提供程序。 Access、SQL Server、SQL Server Compact、MySQL、Oracle、ODBC、OLEDB、Sybase 等。 使用Visual Query Builder构建复杂的查询。 使…

Steam/CSGO游戏搬砖1月行情分析及应对方法

Steam/CSGO游戏搬砖1月行情分析及应对方法 这几天,我看很多地方还在对外宣称说这个项目有百分之十几,二三十的利润率,多么无敌和暴利! 天啦 ,这些人为了能割到小白的韭菜真是无所不用其极,什么牛都能吹得出…

外包和外派

前言 简单介绍下人们常说的外包是什么,应届生未出社会没有经验,避免求职过程中的一些坑。 文章目录前言一、什么是外包?1、简介1、项目外包2、人力外包二、外包公司有哪些?三、优缺点1、优点2、缺点四、选择一、什么是外包&#x…

海思SS928V100开发(2)镜像烧录

1. 开发板没有uboot 在\01.software\pc\ToolPlatform下,打开烧写工具ToolPlatform如下: 选择 “烧写eMMC”,并添加fastboot,kernel,rootfs,如下图: 然后点击 烧写,进入烧写模式(注意:检查串口选择是否正确,传输方式选择 网口): 烧写完成uboot,kernel和rootf后的…

流媒体协议之RTMP详解

流媒体协议之RTMP详解 文章目录流媒体协议之RTMP详解1 RTMP概述2 RTMP交互过程2.1 握手协议2.2 RTMP分块(chunk)2.3 协议控制消息(Protocol Control Message)2.4 RTMP Message Format2.5 不同类型的RTMP Message2.6 RTMP Massage和…

【Linux多线程编程】7. 线程锁(4)——信号量

前言 上篇文章Linux多线程编程】6. 线程锁(3)——条件变量 介绍了使用条件变量实现多线程同步的方式,而条件变量一般与互斥锁一同配合。本文介绍多线程同步的另一种方式——信号量,使用比条件变量简单,也用来解决生产…

【Ansible】ansible Playbook

文章目录一、Ad-Hoc 的问题二、PlayBook 是什么三、YAML 学习1.yaml 特点2.基本语法四、 Playbook 的编写1.play 的定义2.Play 属性3.一个完整的剧本4. tasks 属性中任务的多种写法5.具有多个 play 的 playbook6. 如何对 playbook 进行语法校验下面校验的方法,只能校…

想要申请双软认证 这九大标准你满足吗

申请双软认证的优势有很多,最主要的就是能够节省企业的税收支出,减少成本,企业的利润就会增加,企业也能够发展得更好了。 要申请双软认证,企业就需要及时的了解双软认证的要求,不光是要有软件著作权&#…

编写jinjia2模板和角色部分 ansible(6)

目录 题目: 1、jinjia2模板: 编写hosts.j2,内容如下(主机名和ip地址使用变量): (1)Welcome to 主机名 !(比如servera.lab.example.com) My ip is ip地址. &#xff…