HTML5 <video> Chrome中的播放器控件右侧三个点打开空白屏幕

Posted 2023-03-05

【中文标题】HTML5 <video> Chrome中的播放器控件右侧三个点打开空白屏幕

【英文标题】：HTML5 <video> Player Controls in Chrome Three Dots on the Right Open Blank Screen

【发布时间】：2019-06-27 16:58:43

【问题描述】：

我正在使用标准 html5 <video> 标签将视频嵌入到页面中：

<video controls>
    <source src="video/intro-video.mp4" type="video/mp4"/>
</video>

但是，在右侧的 Chrome 的默认控件中，会显示三个点（选项），但是，当您单击它们时，它会进入一个空白屏幕，除了刷新整个页面之外没有其他方法可以摆脱它：

如何使选项消失或防止出现空白屏幕？

【问题讨论】：

对我来说，当我点击这三个点时它什么也没做。即使我添加了controlsList="fullscreen download remoteplayback"

在删除了我的视频所包含的 react-slick 之后 - 它开始按预期工作。

【参考方案1】：

您可以在controlslist 中添加"nodownload" and "noplaybackrate"，这将隐藏视频中的下载选项，并在视频标签内添加disablepictureinpicture，这将隐藏画中画选项，这样三个点就会被隐藏：

<video  controls disablepictureinpicture controlslist="nodownload">
</video>

工作样本：

<video  controls disablepictureinpicture controlslist="nodownload noplaybackrate">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

【讨论】：

感谢您的解释。你能添加一些代码作为例子吗

谢谢你 - 它也适用于音频控制

现在有“播放速度”控制

对于较新的浏览器还需要添加noplaybackrate：html <video width="100%" controls disablepictureinpicture controlslist="nodownload noplaybackrate">

【参考方案2】：

如果您禁用这些选项，使用下面列表中的相关排除项，点应该会消失：

<video controls controlsList="nofullscreen nodownload noremoteplayback noplaybackrate">
</video>

详情请见ControlsList

【参考方案3】：

当视频元素的祖先元素之一应用了 css 样式 transform: translate(0,0) 或 transform: translate3d(0,0,0) 时，似乎会发生此问题。 从这个元素中删除它可以解决空白屏幕的问题。

【讨论】：

这是正确的。但是，如果无法修改祖先，是否可以在音频/视频元素中修复它？

不，不修改祖先元素就无法修复它。这是所有基于 chromium 的浏览器中的一个错误（我记得），但这是一个已知问题，由于规范而无法修复

【参考方案4】：

好的，知道了！根据视频元素在页面中的嵌入方式，“选项”按钮的行为似乎有所不同。从本质上讲，它提供下载或“画中画”功能或两者兼有，如果页面是具有动态生成内容的宽滚动站点，单击时会导致空白屏幕，这是我的问题。我可以通过两种方式解决这个问题：

在单独的固定容器中嵌入视频（如模态弹出窗口）

使用disablePictureInPicture 属性完全消除画中画功能。 https://wicg.github.io/picture-in-picture/#dom-htmlvideoelement-disablepictureinpicture

【参考方案5】：

要标记其他答案，并且由于它似乎没有记录，如果“noplaybackrate”导致溢出菜单出现，它将隐藏播放速率按钮。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。