更新记录
1.0.1(2024-03-08)
优化错误反馈,新增源错误返回
1.0.0(2024-03-06)
初始发布
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.6.8,Android:8.0,iOS:不确定 |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
kux-pip
kux-pip
是一个原生画中画的简单封装实现,可以实现简单类似视频软件的小窗播放效果。支持画中画窗口变化监听、自定义宽高比等。
插件特色
- 原生画中画实现
- 窗口变化监听
- 自定义宽高比
- 同时支持
uniapp
项目和 uniapp x
项目
目录结构
- 基础
- 安装配置
- 入门使用
- API
- start
- 自定义类型
- StartOptions
- 错误码
基础
安装配置
本插件为完全的 uni_modules
插件,所以直接在 插件市场 搜索 kux-pip
安装即可。
入门使用
注意
需要打包自定义基座方可正常使用
uniapp x项目示例
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<!-- 状态栏 -->
<view v-if="height == initHeight" class="status_bar"></view>
<view>
<video ref="videoRef" style="width: 100%;" :style="{height: height + 'px'}" :controls="true" src="http://www.runoob.com/try/demo_source/mov_bbb.mp4"></video>
</view>
<button @click="enterPictureInPictureMode">开启画中画模式</button>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script setup>
import { start } from '@/uni_modules/kux-pip';
import { StartOptions, StartSuccess } from '@/uni_modules/kux-pip/utssdk/interface';
const videoRef = ref<UniVideoElement | null>(null);
const initHeight = ref(200);
const height = ref(initHeight.value);
function enterPictureInPictureMode() {
start({
success(res: StartSuccess) {
console.log(res, '成功回调');
},
fail(res: UniError) {
console.log(res, '失败回调');
},
complete(res: any) {
console.log(res, '完成回调');
},
stateChange(res) {
if (res.height < initHeight.value) {
height.value = res.height;
} else {
height.value = initHeight.value;
}
}
} as StartOptions);
}
</script>
<style>
.status_bar {
height: var(--status-bar-height);
width: 100%;
background-color: black;
}
</style>
uniapp 项目示例
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<!-- 状态栏 -->
<view v-if="height == initHeight" class="status_bar"></view>
<view>
<video id="video" ref="videoRef" :style="{height: height + 'px', width: width}" :controls="true" src="http://www.runoob.com/try/demo_source/mov_bbb.mp4"></video>
</view>
<button @click="enterPictureInPictureMode">开启画中画模式</button>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { start } from '@/uni_modules/kux-pip';
import { StartOptions, StartSuccess } from '@/uni_modules/kux-pip/utssdk/interface';
import { onReady } from '@dcloudio/uni-app';
// const videoRef = ref<UniVideoElement | null>(null);
const initHeight = ref(200);
const height = ref(initHeight.value);
const width = ref('100%');
const videoContext = ref(null);
onReady(() => {
videoContext.value = uni.createVideoContext('video');
})
function enterPictureInPictureMode() {
start({
success(res: StartSuccess) {
console.log(res, '成功回调');
},
fail(res) {
console.log(res, '失败回调');
},
complete(res: any) {
console.log(res, '完成回调');
},
stateChange(res) {
if (res.height < initHeight.value) {
height.value = res.height;
width.value = `${res.width}px`;
videoContext.value!.play();
} else {
height.value = initHeight.value;
width.value = '100%';
}
}
} as StartOptions);
}
</script>
<style>
.status_bar {
height: var(--status-bar-height);
width: 100%;
background-color: black;
}
</style>
注意
- 因为uniapp项目的activity管理和uniapp x的有差异,所以uniapp项目小窗是把整个应用小窗了,这点要特别注意下
- 需要小窗的页面建议禁用原生导航栏
- uniapp项目下需要自己调整进入小窗和退出小窗时页面内容的样式布局,可以参考上面示例代码和uniapp x的是有少许的差异
API
start
StartOptions
参数名 |
类型 |
是否必填 |
默认值 |
描述 |
numerator |
number |
否 |
16 |
自定义像素比的分子或者长度比例 |
denominator |
number |
否 |
9 |
自定义像素比的分母或者宽度比例 |
success |
(res: StartSuccess) => void |
否 |
- |
成功回调 |
fail |
(res: UniError ) => void |
否 |
- |
失败回调 |
complete |
(res: any ) => void |
否 |
- |
完成回调 |
stateChange |
(res: StateChange) => void |
否 |
- |
窗口变化监听回调 |
StartSuccess
参数名 |
类型 |
描述 |
errCode |
number |
成功状态码 |
errMsg |
string |
成功描述 |
StateChange
参数名 |
类型 |
描述 |
width |
number |
画中画窗口宽度 |
height |
number |
画中画窗口高度 |
自定义类型
StartSuccess
export type StartSuccess = {
errCode: number;
errMsg: string;
}
StateChange
export type StateChange = {
width: number;
height: number;
}
StartOptions
export type StartOptions = {
numerator?: number;
denominator?: number;
success?: (res: StartSuccess) => void;
fail?: (res: UniError) => void;
complete?: (res: any) => void;
stateChange?: (res: StateChange) => void;
}
Start
export type Start = (options: StartOptions) => void;
StartErrorCode
export type StartErrorCode = 1001 | 1002;
StartFail
export interface StartFail extends IUniError {
errCode: StartErrorCode
}
错误码
错误码 |
描述 |
1001 |
开启画中画失败 |
1002 |
用户拒绝了画中画授权 |
友情推荐