vue制作画中画，说简单也简单，说复杂也复杂。关键在于你对vue组件化开发和视频播放技术的理解程度。我曾经做过一个类似的项目，当时也踩了不少坑。
最开始，我尝试用一个简单的<video></video>标签嵌套在另一个<div>里，再用CSS控制大小和位置。看起来好像没问题，但实际运行起来，你会发现画中画视频的尺寸难以精确控制，而且浏览器兼容性也成问题。不同的浏览器对<code><video></video>标签的渲染和事件处理方式略有不同，导致在某些浏览器上画中画视频会显示异常，甚至无法播放。
后来，我换了一种思路，利用Vue组件进行封装。我创建了一个VideoPlayer组件，负责视频的播放、暂停、控制音量等功能。然后，我创建另一个PictureInPicture组件，这个组件接收VideoPlayer组件作为子组件，并负责画中画视频的显示和位置调整。关键在于，我使用了CSS的position: absolute和transform属性来精确控制画中画视频的位置和大小，并根据父容器的大小动态调整。
这过程中，我发现一个重要细节：为了保证画中画视频的流畅播放，必须在VideoPlayer组件中监听视频的loadedmetadata事件，确保视频元数据加载完毕后再进行画中画的初始化。否则，可能会出现画中画视频无法显示或尺寸错误的问题。
立即学习“前端免费学习笔记（深入）”；
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
再者，浏览器对画中画的支持程度也有差异。有些浏览器原生支持画中画API（pictureInPictureElement.requestPictureInPicture()），可以直接调用；而有些浏览器则需要借助第三方库，比如picture-in-picture。我当时选择的是原生API，因为项目只针对支持原生API的浏览器。如果你的项目需要兼容所有浏览器，就必须选择一个可靠的第三方库，并且仔细阅读其文档，了解其使用方法和局限性。
最后，我还添加了一些用户体验的细节，例如，添加一个按钮来切换画中画模式，并提供一些自定义选项，例如画中画视频的大小和位置。这些细节虽然看起来微不足道，但能显著提升用户体验。
总而言之，Vue制作画中画并非一蹴而就，需要对Vue组件化开发、CSS布局和视频播放技术有一定的了解。 选择合适的方案，处理好浏览器兼容性问题，并注重细节，才能最终实现一个流畅、稳定的画中画效果。 记住，多实践，多调试，才能真正掌握这项技能。
