在 Firefox 69 Beta 和开发者版中测试视频画中画功能

编者注:我们于 2019 年 7 月 11 日更新了这篇文章,提到了画中画功能目前仅在 Windows 上的 Firefox 69 Beta 和开发者版中启用。如果您使用的是 macOS 或 Linux,我们对此带来的期望感到抱歉,我们希望在该功能达到我们的质量标准后,能够在这些平台上启用它。

您是否曾经需要在观看烹饪视频的同时浏览食谱?或者您想在查看课程幻灯片的同时观看讲座的录音。或者您可能想在工作时观看某人直播玩视频游戏。

我们最近发布了 Windows 版 Firefox 的一个版本,它在我们 Beta 和开发者版发布频道 上提供一项实验性功能,旨在让您更容易地做到这些!

画中画功能允许您将视频从播放位置弹出到一个特殊的始终位于顶部的窗口中。然后您可以根据需要移动或调整该窗口的大小!

有两种方法可以将视频弹出到画中画窗口中

通过上下文菜单

如果您打开 <video> 元素的上下文菜单,有时您会看到类似这样的媒体上下文菜单

Showing the default context menu when opened on a video element, with the Picture-in-Picture menu item highlighted.

该上下文菜单中有一个画中画菜单项,您可以使用它来切换该功能。

但是,许多网站很难访问 <video> 元素的上下文菜单。例如,YouTube 会使用自己的菜单覆盖默认的上下文菜单。

您可以通过在右键单击时按住 Shift 键或双击右键来访问默认的本机上下文菜单。但是,我们认为,这不是访问该功能最明显的姿势,因此,我们采用了另一种切换机制 - 画中画视频切换。

通过新的画中画视频切换

当您将鼠标悬停在视频上时,画中画切换会显示出来。它是一个小的蓝色矩形,当您将鼠标悬停在其上时会滑出来。单击蓝色矩形会在画中画播放器窗口中打开底层视频。

Showing the Picture-in-Picture toggle overlaying a video element on YouTube.

请注意,将鼠标悬停在所有视频上时,切换不会显示出来。我们只针对包含音频轨迹、大小足够大且播放时间足够长的视频显示它。

切换的优势在于,我们认为,我们可以让它开箱即用地适用于大多数网站,而无需让网站作者做任何特殊操作!

使用画中画播放器窗口

画中画窗口还允许您快速播放或暂停视频 - 将鼠标悬停在视频上会显示该控件,以及用于关闭窗口的控件,以及关闭窗口同时返回到视频所在的选项卡的控件。

征求您的反馈

我们仍在努力解决键盘辅助功能,以及视频在极端窗口大小下如何显示的一些问题。我们希望让 Windows 上的 Firefox Beta 和开发者版用户有机会试用该功能,并告诉我们他们的感受。我们将使用我们收集的信息来确定我们是否为大多数用户找到了正确的 UI,或者是否需要重新设计。我们也希望在不久的将来为 macOS 和 Linux 带来相同的画中画支持。

我们尤其对视频切换的反馈感兴趣 - 在可发现性和强迫性之间存在微妙的平衡,我们想更清楚地了解蓝色切换在现实世界中对用户的感受。

因此,获取一个更新的 Windows 版 Firefox 69 Beta 或开发者版,试用一下画中画功能!如果您有建设性的反馈意见,您可以使用此表单提交反馈意见。

测试愉快!

关于 Mike Conley

桌面版 Firefox 工程师

Mike Conley 的更多文章…

关于 Andreas Bovens

Andreas Bovens 的更多文章…


20 条评论

  1. Jigar Shah

    不错...我以为这会进入到 68 中。非常创新的功能。它会在选项卡之间工作吗?

    2019 年 7 月 10 日 上午 07:56

    1. Mike Conley

      您好 Jigar,

      我们仍在完善和试验该功能,因此目前它还在 Beta 和开发者版中。我们很高兴您喜欢它!我不确定您所说的“它会在选项卡之间工作吗?”是什么意思 - 请您重新措辞这个问题吗?

      2019 年 7 月 11 日 下午 14:30

      1. dbgarza

        我认为他的意思是,例如,您将 YouTube 视频设置为画中画模式,然后切换到另一个选项卡,并继续观看视频。

        答案是肯定的。现在,我的 YouTube 视频正处于画中画模式,就在这个 Firefox 选项卡旁边,它运行得非常完美 :)

        2019 年 7 月 11 日 下午 22:40

  2. Robert

    很酷的功能!它是否也适用于 WebRTC 视频会议?这是我最需要它的地方(而且经常看到人们使用 skype 来实现此特定功能)

    2019 年 7 月 10 日 上午 09:26

    1. Mike Conley

      您好 Robert,

      我们很高兴您喜欢它!我刚用 talky.io 测试了它,它似乎可以正常工作。画中画中的自视图视频有点奇怪(因为网站会将视频从左到右镜像),但除此之外,它似乎运行得还不错。试一试,告诉我们您的感受!

      2019 年 7 月 11 日 下午 14:32

  3. Kai

    我使用的是 dev 69b3,画中画功能对我来说没有启用 :(

    2019 年 7 月 11 日 下午 13:56

    1. Mike Conley

      您好 Kai,

      您可能没有使用 Windows。这篇文章的最初版本没有提到目前该功能仅在 Windows 上的 Beta 和开发者版中启用。我们已经更新了这篇文章,使其更加清晰,我们希望在该功能达到我们的质量标准后,能够尽快为 macOS 和 Linux 带来该功能。

      2019 年 7 月 11 日 下午 14:33

  4. dbgarza

    这必须是一个很棒的功能。现在我可以浏览 Facebook 并将 YouTube 视频以一个舒适的大小显示在屏幕一侧 :D

    继续努力!:)

    2019 年 7 月 11 日 下午 22:42

  5. Josh Brickner

    我在 Linux 上测试了这个功能(我在 about:config 中启用了标志)。在 68 中,它在 Netflix 上运行得很好,但现在 PiP 按钮甚至没有显示出来?此功能会限制在 DRM 内容上,还是这只是使用 Beta 版的一部分?:)

    2019 年 7 月 13 日 下午 19:58

    1. Mike Conley

      Netflix 问题是一个已知错误,我们希望在 这个错误 中解决它。

      2019 年 7 月 18 日 上午 10:17

  6. Paul

    您好,

    您在 Firefox 中加入了 PIP,这真是太酷了,因为 Chrome 和 Safari 已经有了!

    我想知道您是否计划让我们通过直接访问 PIP API 来使用自定义按钮,而不是默认按钮(蓝色按钮)?

    我尝试了 `document.pictureInPictureEnabled`,但它返回 `false`,而 `requestPipctureInPicture` 返回 `PIP 不支持`。

    提前感谢

    2019 年 7 月 18 日 上午 01:24

    1. Mike Conley

      此功能不包含 Picture-in-Picture WebAPI,我相信您指的是这个。这纯粹是一个浏览器功能,对底层网页不可见。您可以跟踪我们对 Picture-in-Picture WebAPI 规范的立场 这里。

      2019 年 7 月 18 日 上午 10:18

  7. Patrick

    macOS 的本机功能是什么,就像 Safari 一样,它已经支持了一段时间了?为什么你们还没有支持它?

    2019 年 7 月 18 日 上午 08:47

    1. Mike Conley

      我们首先专注于 Windows,然后将尝试添加对 macOS 的支持。

      2019 年 7 月 18 日 上午 10:19

  8. javier enciso

    我刚在 Mac 上的 Firefox nightly 中启用了它。运行完美!
    使用此功能配合 Chrome 上的某些插件,该插件仅适用于 YouTube,但这在其他几个网站(新闻网站)上运行得非常完美。

    感谢您提供这个功能!

    2019 年 7 月 19 日 上午 05:09

  9. Will Friend

    在我的 Windows 8.1 x64 上运行良好。但是,请您考虑让画中画记住上次的大小和位置吗?在我的系统中,视频以 852×480 的大小弹出到屏幕左下角(我的屏幕分辨率是 2560×1440)。

    重大改进!

    2019 年 7 月 19 日 下午 12:54

  10. Dmitry

    终于等到了这个功能!但我有一个关于调整大小的问题。我无法在画中画模式下调整播放器的尺寸。我使用的是 macOS 10.14.5 上的 69 beta 版。

    2019 年 8 月 2 日 上午 00:34

    1. Mike Conley

      您好,Dmitry:

      画中画功能在 macOS 上默认情况下未启用,因为其中某些部分(调整播放器窗口大小、保持播放器窗口始终置顶)尚未完成。我们希望尽快完成它们。

      - Mike

      2019 年 8 月 2 日 上午 06:41

  11. Simon

    这是一个很棒的功能,而且实现得很好!浮动窗口使用起来很方便。
    在我的 Linux 系统上运行良好(在我启用 about:config 中的功能后)。

    2019 年 8 月 2 日 上午 00:43

  12. Jim Ley

    它运行得“还行”,我发现很多时候它并没有置顶,而且右键单击关闭窗口会导致丑陋的蓝色 CTA 失效。视频切换时会变白,这有点难看,但这都是小问题。

    如何去除蓝色框 CTA?它似乎总是存在,这使得观看非 PiP 视频变得很困难。

    UX 集成不太清晰,固定位置和它在各种屏幕 UX 中隐藏的效果很好,因为它设法保持隐藏,因此不会干扰用户,但它确实阻止了用户访问该功能,当然,这是 API 使用的用例。)

    当视频被用作“背景”时,蓝色 PiP 按钮令人困惑且难看。

    还有与播放器缺乏集成,这是一个更大的问题,全屏按钮希望响应用户进入全屏的请求而取消 PiP,没有办法做到这一点,也不知道它在 PiP 中以禁用全屏按钮/提供提示该怎么做。同样,用户在文章中滚动时通常会获得页面内 PiP 体验,其中播放器会随他们一起向下滚动页面 - 当 PiP 时,这应该被禁用,但除非页面知道 PiP,否则它无法做到这一点。

    音频 PiP(使用画布视频在没有实际向用户提供视频的广播电台提供音频控件和正在播放的视觉效果)是 PiP 的另一个受欢迎的功能,该用例可以使用上述 API 完成,但前提是视频本身始终在页面中以允许启动,这似乎是浪费,而且可能让用户管理这种设计感到困惑。

    这主要是鼓励实施 API 的评论。

    2019 年 8 月 9 日 上午 03:49

本文的评论已关闭。