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

Question

似乎在任何地方都找不到答案。

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

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

但是，在右侧的Chrome默认控件中，会显示三个点（选项），但是，当您单击它们时，它会变成空白屏幕，除非刷新整个页面，否则无法清除。 。

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

谢谢。

Answer 1

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

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

有关更多详细信息，请参见ControlsList

Answer 2

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

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

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

Answer 3

我知道为时已晚，但它对其他人很有用，您可以在控件列表中添加“ nodownload”，这将隐藏视频中的下载选项，并在视频标签中添加“ disablepictureinpicture”，该选项将图片中的图片隐藏这样，三个点就被隐藏了

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

working sample

Answer 4

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