vue制作画中画，说简单也简单，说复杂也复杂。关键在于你对vue组件化开发和视频播放技术的理解程度。我曾经做过一个类似的项目，当时也踩了不少坑。

最开始，我尝试用一个简单的标签嵌套在另一个

里，再用CSS控制大小和位置。看起来好像没问题，但实际运行起来，你会发现画中画视频的尺寸难以精确控制，而且浏览器兼容性也成问题。不同的浏览器对标签的渲染和事件处理方式略有不同，导致在某些浏览器上画中画视频会显示异常，甚至无法播放。

后来，我换了一种思路，利用Vue组件进行封装。我创建了一个VideoPlayer组件，负责视频的播放、暂停、控制音量等功能。然后，我创建另一个PictureInPicture组件，这个组件接收VideoPlayer组件作为子组件，并负责画中画视频的显示和位置调整。关键在于，我使用了CSS的position: absolute和transform属性来精确控制画中画视频的位置和大小，并根据父容器的大小动态调整。

这过程中，我发现一个重要细节：为了保证画中画视频的流畅播放，必须在VideoPlayer组件中监听视频的loadedmetadata事件，确保视频元数据加载完毕后再进行画中画的初始化。否则，可能会出现画中画视频无法显示或尺寸错误的问题。

再者，浏览器对画中画的支持程度也有差异。有些浏览器原生支持画中画API（pictureInPictureElement.requestPictureInPicture()），可以直接调用；而有些浏览器则需要借助第三方库，比如picture-in-picture。我当时选择的是原生API，因为项目只针对支持原生API的浏览器。如果你的项目需要兼容所有浏览器，就必须选择一个可靠的第三方库，并且仔细阅读其文档，了解其使用方法和局限性。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

最后，我还添加了一些用户体验的细节，例如，添加一个按钮来切换画中画模式，并提供一些自定义选项，例如画中画视频的大小和位置。这些细节虽然看起来微不足道，但能显著提升用户体验。

总而言之，Vue制作画中画并非一蹴而就，需要对Vue组件化开发、CSS布局和视频播放技术有一定的了解。 选择合适的方案，处理好浏览器兼容性问题，并注重细节，才能最终实现一个流畅、稳定的画中画效果。 记住，多实践，多调试，才能真正掌握这项技能。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！