Picture-in-Picture Extension (by Google):系统级视频画中画效果

Picture-in-Picture Extension (by Google)背景介绍

Picture-in-Picture 画中画，可以让用户在使用 Chrome 或者 Firefox 浏览器观看视频的时候，让视频已画中画的样式呈现出来，并且支持将画中画窗口拖到浏览器以外，非常的方便。目前 Chrome 需要官方扩展支持，我们之前也介绍的悬浮画中画播放器。今天我们要介绍的是谷歌官方推出的Picture-in-Picture Extension (by Google)。而 Firefox 还在测试之中，需要 Firefox Nightly 版本才能开启。

今天有朋友来找浏览器的画中画功能，刚好想起了 Chrome 前阵子的官方画中画扩展，和 Firefox 正在测试的画中画效果。而另外一个浏览器 Safari 则早就原生实现了画中画功能。

Chrome：Picture-in-Picture Extension (by Google)

Picture-in-Picture Extension (by Google)就是所谓 Chrome 官方画中画扩展啦，使用简单，安装后就支持各大 HTML5 的在线视频画中画播放了。

另外还有快捷键支持：Alt + P (⌥ + P )，可以非常容易的将画中画拖动到屏幕的任意位置，并且置顶显示，浏览器允许最小化。可以在 Chrome 商店安装。另外一个要注意的是，这里所说的「画中画」，和视频网站本身播放器右下角的「迷你播放器」是不一样的喔！迷你播放器只能出现在视频网站中，但「子母画面」是可以跳出浏览器使用的。

Picture-in-Picture Extension (by Google)使用方法

1.离线安装Picture-in-Picture Extension (by Google)的方法参照：怎么在谷歌浏览器中安装.crx扩展。如果你是最新版chrome浏览器下载，可以参考chrome 67版本后无法拖拽离线安装CRX格式插件的解决方法。

Firefox Nightly：Picture-in-Picture

目前的 Firefox 画中画需要超前测试版 Nightly 才能支持，也就是说你需要先斗得过恶龙才行，不要怕。

具体步骤：

1. 打开 about:config 跳过恶龙
2. 搜索 media.videocontrols.picture-in-picture.enabled 点击切换，让其变为 true
3. 建议重启浏览器
4. 打开视频网址，并开始播放
5. 请多次右键视频，会随机出现画中画菜单（Nightly 就是这么神奇）
6. 画中画开启

Chrome 与 Firefox 的画中画还是略有不同，Chrome 开启画中画后，浏览器内的视频将不再播放，而 Firefox 则相当于启用了双屏播放，画中画和原标签页同步播放。

但是，由于 Firefox Nightly 版本并不适合普通用户，还是建议等待一段时间再使用的好。