uniapp 如何实现画中画功能

在uniapp中如何实现画中画功能？目前需要在小程序端实现类似视频悬浮播放的效果，但查了官方文档没有找到直接可用的API。请问有没有可行的解决方案？是否需要借助原生开发或第三方插件？如果能提供具体的代码示例就更好了。

2 回复

UniApp 本身不直接支持画中画，但可通过以下方式实现：

  1. 使用原生插件：开发或集成原生插件（如 Android 的 PictureInPicture API 或 iOS 的 PIP）。
  2. 视频组件：利用 <video> 组件的 picture-in-picture 属性（部分平台支持）。
  3. 自定义悬浮窗：通过 plus.nativeObj.View 创建悬浮窗口模拟画中画效果。

注意：需分平台处理，兼容性有限。


在 UniApp 中实现画中画（Picture-in-Picture，PiP）功能，主要依赖于原生平台（如 iOS 和 Android）的 API，因为 UniApp 本身不直接提供跨平台的画中画组件。以下是实现步骤和示例代码：

实现思路

  1. 判断平台：使用 uni.getSystemInfoSync() 检测当前运行环境（iOS 或 Android）。
  2. 调用原生 API：
    • Android：通过 uni.requireNativePlugin() 调用原生模块（如 PictureInPicture 插件）。
    • iOS：使用 WebView 或原生 API（需配置权限）。
  3. 权限处理：确保应用有画中画权限（Android 需在 manifest 配置，iOS 需在 info.plist 添加背景模式）。

示例代码（Android 方向）

假设使用 UniApp 的 Native.js 或原生插件：

// 在页面中实现画中画
export default {
  methods: {
    enterPipMode() {
      // 获取系统信息
      const systemInfo = uni.getSystemInfoSync();
      if (systemInfo.platform === 'android') {
        // Android：通过 Native.js 调用原生 API
        const Context = plus.android.importClass('android.content.Context');
        const activity = plus.android.runtimeMainActivity();
        const pipManager = activity.getSystemService(Context.PICTURE_IN_PICTURE_SERVICE);
        
        if (pipManager != null && pipManager.isPictureInPictureSupported()) {
          // 创建画中画参数
          const PipParams = plus.android.importClass('android.app.PictureInPictureParams');
          const Builder = plus.android.importClass('android.app.PictureInPictureParams$Builder');
          const builder = new Builder();
          builder.setAspectRatio(createRational(16, 9)); // 设置宽高比
          const params = builder.build();
          
          // 进入画中画模式
          activity.enterPictureInPictureMode(params);
        } else {
          uni.showToast({ title: '设备不支持画中画', icon: 'none' });
        }
      } else if (systemInfo.platform === 'ios') {
        // iOS：通常通过 WebView 或原生配置实现，需额外处理
        uni.showToast({ title: 'iOS 需原生配置', icon: 'none' });
      }
    },
    createRational(numerator, denominator) {
      const Rational = plus.android.importClass('android.util.Rational');
      return new Rational(numerator, denominator);
    }
  }
}

注意事项

  • Android 配置：在 manifest.json 的 Android 部分添加画中画支持：
    "android": {
  "permissions": ["PICTURE_IN_PICTURE"]
}
  • iOS 限制：画中画功能主要适用于视频播放，需使用 <video> 组件并设置 webkit-playsinline 和 x5-playsinline 属性，同时依赖系统支持（如 iOS 14+）。
  • 兼容性：不同设备和系统版本可能支持度不同，需测试并降级处理。

简化方案

对于视频播放场景，直接使用 UniApp 的 <video> 组件，并设置 picture-in-picture-mode 属性（部分平台可能自动支持）：

<video src="video.mp4" controls picture-in-picture-mode></video>

总结

UniApp 画中画功能需结合原生开发，建议优先使用视频组件简化实现，或通过插件（如 uni-app-pip）封装原生逻辑。测试时务必在真机进行。

回到顶部