更新记录

1.0.1（2024-03-08）

优化错误反馈，新增源错误返回

1.0.0（2024-03-06）

初始发布

平台兼容性

kux-pip

kux-pip 是一个原生画中画的简单封装实现，可以实现简单类似视频软件的小窗播放效果。支持画中画窗口变化监听、自定义宽高比等。

开源地址：https://gitcode.com/kviewui/kux-pip

插件特色

• 原生画中画实现
• 窗口变化监听
• 自定义宽高比
•  同时支持 uniapp 项目和 uniapp x 项目

目录结构

1. 基础
   1. 安装配置
   2. 入门使用
2. API
   1. start
3. 自定义类型
   1. StartOptions
4. 错误码

基础

安装配置

本插件为完全的 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
• 返回值：void

StartOptions

StartSuccess

StateChange

自定义类型

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
}

错误码

交流群

QQ群：870628986 点击加入

友情推荐

• GVIM即时通讯模版：GVIM即时通讯模版，基于uni-app x开发的一款即时通讯模版
• t-uvue-ui：T-UVUE-UI是基于UNI-APP X开发的前端UI框架
• UxFrame 低代码高性能UI框架：【F2图表、双滑块slider、炫酷效果tabbar、拖拽排序、日历拖拽选择、签名...】UniAppX 高质量UI库
• wx-ui 基于uni-app x开发的高性能混合UI库：基于uni-app x开发的高性能混合UI库，集成 uts api 和 uts component，提供了一套完整、高效且易于使用的UI组件和API，让您以更少的时间成本，轻松完成高性能应用开发。
• firstui-uvue：FirstUI（unix）组件库，一款适配 uni-app x 的轻量、简洁、高效、全面的移动端组件库。
• easyXUI 不仅仅是UI 更是为UniApp X设计的电商模板库：easyX 不仅仅是UI库，更是一个轻量、可定制的UniAPP X电商业务模板库，可作为官方组件库的补充,始终坚持简单好用、易上手