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

Question

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

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

然而，在Chrome右边的默认控件中，会出现三个点（选项），但是，当你点击它们时，它会进入一个空白屏幕，无法退出除了刷新整个页面：

如何使选项消失或防止黑屏？

Answer 1

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

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

有关详细信息，请参阅 ControlsList

Answer 2

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

在单独的固定容器中嵌入视频（如模态弹出窗口）
使用 disablePictureInPicture 属性完全消除画中画功能。 https://wicg.github.io/picture-in-picture/#dom-htmlvideoelement-disablepictureinpicture

Answer 3

您可以在 controlslist 中添加 "nodownload" and "noplaybackrate"，这将隐藏视频的下载选项，并在视频标签中添加 disablepictureinpicture，这将隐藏画中画选项，并通过此隐藏三个点的方式：

<video width="100%" controls disablepictureinpicture controlslist="nodownload">
</video>

工作样本：

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

Answer 4

当视频元素的祖先元素之一应用了 css 样式 transform: translate(0,0) 或 transform: translate3d(0,0,0) 时，似乎会出现此问题。将其从该元素中删除可解决黑屏问题。

Answer 5

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

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

HTML5 <video> Player Controls in Chrome Three Dots on the Right Open Blank Screen

html

video

google-chrome

html5-video