视频流应用最小化时如何显示迷你悬浮视频播放器？

不同平台的实现方式各有差异，以下是各主流平台的具体方案：

Web 端（浏览器环境） #

直接用浏览器原生的画中画（Picture-in-Picture, PiP）API，这是最便捷的方案。当用户最小化标签页或切换应用时，调用API就能让视频悬浮在其他窗口上方。

• 核心代码示例：

  // 先检查浏览器是否支持画中画
  if ('pictureInPictureEnabled' in document) {
    const videoElement = document.getElementById('video-player');
    if (videoElement) {
      // 触发画中画（注意：必须由用户操作触发，比如点击按钮，浏览器不允许自动调用）
      videoElement.requestPictureInPicture()
        .catch(err => console.error('进入画中画失败:', err));
    }
  }
  

Android 端 #

利用Android 8.0+ 自带的画中画模式，步骤如下：

1. 在AndroidManifest.xml的播放页面Activity中添加配置：

   <activity
     android:name=".VideoPlayerActivity"
     android:supportsPictureInPicture="true"
     android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation" />
   

2. 在代码中触发画中画模式，比如应用退到后台时：

   val pipParams = PictureInPictureParams.Builder()
     .setAspectRatio(Rational(16, 9)) // 设置视频的宽高比
     .build()
   enterPictureInPictureMode(pipParams)
   

3. 记得处理Activity生命周期，确保后台时视频能继续播放。

iOS 端 #

iOS 14+ 支持系统级画中画，配置起来很简单：

1. 在Info.plist中添加后台模式权限，包含audio和picture-in-picture；
2. 使用AVPlayerViewController并开启画中画支持：

   let playerVC = AVPlayerViewController()
   playerVC.player = yourAVPlayerInstance
   playerVC.allowsPictureInPicturePlayback = true
   present(playerVC, animated: true)
   

   当应用最小化或切换到其他App时，视频会自动转为悬浮的画中画窗口，无需额外触发。

桌面端（Windows/macOS） #

Windows #

如果是用Electron开发跨平台桌面应用，可以创建一个置顶的无边框小窗口作为迷你播放器：

const { BrowserWindow } = require('electron');

// 创建迷你播放器窗口
const miniPlayerWindow = new BrowserWindow({
  width: 320,
  height: 180,
  frame: false, // 去掉窗口边框
  alwaysOnTop: true, // 始终置顶
  skipTaskbar: true, // 不在任务栏显示
  webPreferences: { nodeIntegration: true }
});

// 主窗口最小化时，显示迷你播放器（前提是视频正在播放）
mainWindow.on('minimize', () => {
  if (isVideoPlaying) {
    miniPlayerWindow.show();
    // 这里要同步主窗口的视频播放进度、音量等状态到迷你窗口
  }
});

如果是原生Win32应用，可以调用Win32 API创建置顶窗口，逻辑类似。

macOS #

两种方式可选：

1. 用系统自带的画中画功能（macOS 10.14+），通过AVPlayerView开启：

   let playerView = AVPlayerView()
   playerView.player = yourAVPlayerInstance
   playerView.allowsPictureInPicturePlayback = true
   

   应用最小化时视频自动进入悬浮画中画。
2. 原生AppKit开发的话，创建一个NSWindow设置为置顶无边框窗口，作为自定义迷你播放器。

通用注意事项 #

• 权限：所有平台都需要获取对应权限（比如后台播放、画中画权限），部分平台需要用户手动授权；
• 状态同步：迷你窗口要和主应用保持播放进度、音量、播放/暂停状态的同步；
• 用户交互：给迷你窗口加关闭、调大小、切回主应用的按钮，别干扰用户正常操作。

内容的提问来源于stack exchange，提问作者Gimuser39