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

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