简介(下载地址

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

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

截图展示

android 直播悬浮框 直播悬浮窗软件_画中画

使用方法

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 方法参数

打开画中画

属性名

类型

必填

默认值

说明

url

String

true

视频地址

currentTime

Number

true

0

当前播放时长(毫秒)

isLive

Boolean

false

false

是否是直播,默认false

custom

String

true

自定义参数

restart 方法参数

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