uniapp 画中画悬浮窗（视频） Ba-VideoPip-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 画中画悬浮窗（视频） Ba-VideoPip。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

简介（下载地址）

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

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

截图展示

uniapp 画中画悬浮窗（视频） 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 方法参数

打开画中画

属性名	类型	必填	默认值	说明
url	String	true		视频地址
currentTime	Number	true	0	当前播放时长(毫秒)
isLive	Boolean	false	false	是否是直播，默认false
custom	String	true		自定义参数