今天研究了下小窗口播放youtube的方案，意外地收获了几个知识点，在这里记录下。

方案一：将youtube标签页独立成小窗口

这种思路需要解决如下的问题：

  • 视频在窗口内全屏
    • 隐藏youtube内部除播放器之外的部分
    • 隐藏浏览器的工具栏和标签栏等
  • 将小窗口保持在最前

搜索youtube window fullscreen，可找到有个chrome插件：YouTube Windowed Fullscreen。

它能实现如下图所示的效果:

unnamed.jpg

它解决了隐藏youtube内部除播放器外其余部分的问题。

下一步是隐藏浏览器的工具栏和地址栏等，在Chrome配置中查了下，没找到相关配置。但是通过搜索引擎搜到了一种 app 模式。chrome可以以app形式启动一个浏览器窗口，打开指定的URL，像是 PWA 应用一样。

"path\to\chrome\chrome.exe" --app=https://youtube.com

这样第二个问题也解决了。

第三个问题是将小窗口保持在最前，这部分根据操作系统不同，对应的设置方式也不同。在搜索它的过程中，我发现了第二种解决方案，就没再继续研究保持窗口在最前的解决方案。

那么下面介绍下方案二。

方案二：利用Chrome的画中画功能

从Chrome 70开始，播放视频的时候可以利用“画中画”功能将视频播放器悬浮在窗口外。而且不像youtube中提供的迷你播放器，它是独立于当前标签页，甚至独立于浏览器窗口的。只要不关闭对应的视频播放页，就可以让小窗口一直悬浮在桌面上。而且它还是一直保持最前的。

然后，上面提到的问题都能直接解决掉了。画中画好棒！

有一些视频播放器会在播放器外面套一层遮罩，这样的就会屏蔽掉右键菜单事件，找不到“画中画”。这种场景下，可以考虑使用Chrome扩展商店安装一些画中画插件即可。