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