vue video画中画

Vue Video 画中画（Picture-in-Picture）是指在一个页面中播放视频时，将视频窗口缩小并浮动在页面的某个位置，使用户可以在继续浏览页面的同时观看视频。

实现 Vue Video 画中画功能的方法如下：

1. 在 Vue 组件中引入 video 标签，并设置相关属性：

<video ref="videoPlayer" src="yourVideoUrl" controls></video>

2. 在 Vue 组件的 methods 中添加画中画功能的方法：

togglePictureInPicture() {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  } else {
    this.$refs.videoPlayer.requestPictureInPicture();
  }
}

3. 在 Vue 组件的模板中添加画中画按钮，并绑定点击事件：

<button @click="togglePictureInPicture">画中画</button>

4. 最后，在 Vue 组件的 mounted 钩子函数中添加以下代码，以确保浏览器支持画中画功能：

mounted() {
  if ('pictureInPictureEnabled' in document) {
    this.$refs.videoPlayer.addEventListener('enterpictureinpicture', () => {
      console.log('进入画中画模式');
    });
    this.$refs.videoPlayer.addEventListener('leavepictureinpicture', () => {
      console.log('退出画中画模式');
    });
  }
}

这样，在用户点击画中画按钮时，视频窗口就会浮动在页面的某个位置，并且用户可以在继续浏览页面的同时观看视频。当用户退出画中画模式时，视频窗口会恢复到原来的大小和位置。