uni-app 视频播放videoPlayer组件 新增小窗口画中画功能

在uni-app中实现视频播放组件videoPlayer的新增小窗口画中画（PiP，Picture-in-Picture）功能，可以利用HTML5的requestPictureInPicture API。以下是一个简单的代码示例，展示了如何在uni-app中实现这一功能。

首先，确保你的videoPlayer组件使用的是HTML5的<video>标签，因为requestPictureInPicture是HTML5视频元素的一个方法。

videoPlayer.vue

<template>
  <view>
    <video
      ref="videoPlayer"
      id="videoPlayer"
      src="your-video-url.mp4"
      controls
      @click="enterPiP"
      style="width: 100%; height: auto;"
    ></video>
  </view>
</template>

<script>
export default {
  methods: {
    enterPiP() {
      const videoElement = this.$refs.videoPlayer;
      
      if (!("pictureInPictureEnabled" in document) || !document.pictureInPictureEnabled) {
        console.error("Picture-in-Picture is not supported or enabled in this browser.");
        return;
      }

      videoElement.requestPictureInPicture()
        .then(() => {
          console.log("Entered Picture-in-Picture mode.");
        })
        .catch(err => {
          console.error("Failed to enter Picture-in-Picture mode: ", err);
        });
    }
  }
}
</script>

<style scoped>
/* Add your styles here */
</style>

注意事项

1. 浏览器兼容性：requestPictureInPicture API在部分浏览器和平台上可能不支持或存在兼容性问题。务必在实际项目中测试不同环境下的表现。

2. 权限：用户需要授予网站或应用进入画中画模式的权限。如果用户拒绝，requestPictureInPicture将返回一个Promise，并在catch中捕获错误。

3. 事件处理：在实际应用中，你可能需要处理更多的事件，如enterpictureinpicture、leavepictureinpicture等，以便在画中画模式切换时执行相应的逻辑。

4. 样式调整：在画中画模式下，视频的样式和布局可能需要调整以适应小窗口的显示。

5. 退出画中画：用户可以通过系统提供的UI（如iOS的控制中心）退出画中画模式。如果需要编程方式退出，可以使用document.exitPictureInPicture()方法。

通过上述代码，你可以在uni-app中实现基本的画中画功能。根据具体需求，你可能需要进一步优化和扩展功能。