uniapp 画中画悬浮窗（视频） Ba-VideoPip
简介（下载地址）
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 | 自定义参数 |
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（文档）