本文介绍了Chrome 70开始原生支持的HTML5 video的Picture-in-Picture（画中画）功能，详细讲解了如何使用API进入和退出画中画模式，并提供了相关事件接口和画中画窗口对象的说明。通过示例代码，读者可以快速理解并应用这一前端新特性，提升用户体验。
一、下面播报一则新闻
Chrome 70已经原生支持HTML5 <video>播放时候Picture-in-Picture，也就是俗称的画中画技术，也就是很多视频网站看评论时候，播放视频变小挂在右下角的这种交互技术。
我一瞅自己的Chrome浏览器，正好就是Chrome 70，体验了一番，挺有意思的，值得介绍下，以后估计用得着。
二、先看画中画实例demo
点击页面的切换按钮，或者右键视频→画中画，都可以进入视频画中画模式：
在页面右下角可以看到一个小视频，尺寸小小的视频：
实际上，此时的这个小视频是个脱离于浏览器定位的，顶级的播放窗口，我们把浏览器最小化，此视频依然会在右下角播放，就像腾讯视频客户端播放器的精简
最低0.47元/天 解锁文章
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
