vue 视频播放如何实现画中画

要实现 Vue 视频播放的画中画功能，可以使用 HTML5 的 Picture-in-Picture API。这个 API 允许我们在一个独立的浮动窗口中播放视频，而不是在原来的页面中播放。下面是实现的步骤：

1. 在 Vue 组件中引入视频元素，并添加一个按钮用于触发画中画功能：

<template>
  <div>
    <video ref="videoPlayer" controls>
      <source :src="videoUrl" type="video/mp4">
    </video>
    <button @click="togglePictureInPicture">画中画</button>
  </div>
</template>

2. 在组件的 methods 中实现 togglePictureInPicture 方法：

methods: {
  togglePictureInPicture() {
    const video = this.$refs.videoPlayer;

    // 如果浏览器支持画中画功能
    if (document.pictureInPictureEnabled && !video.disablePictureInPicture) {
      if (!document.pictureInPictureElement) {
        // 进入画中画模式
        video.requestPictureInPicture();
      } else {
        // 退出画中画模式
        document.exitPictureInPicture();
      }
    }
  }
}

3. 样式调整

<style>
  video:-webkit-full-screen {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
</style>

这样就可以在 Vue 组件中实现 HTML5 画中画功能了。