双击禁用全屏？答案

【问题标题】：Disable fullscreen on double-click?双击禁用全屏？
【发布时间】：2020-03-10 19:14:53
【问题描述】：

我有一个在 webview2 控件（Edge Chromium）中加载网页的应用程序，它加载的页面只包含一个带有源代码的 html5 视频标签和一些用于样式的 css。

我正在使用的 css 使视频占据了浏览器页面的整个区域，这可以正常工作，但我想禁用进入全屏的功能（例如，占据整个桌面区域）。

我可以通过以下方式在 css 中隐藏全屏按钮：

::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

但是视频还是可以双击进入全屏的。

我已尝试将视频移动到带有donotallowfullscreen 的 iframe 中的辅助页面，但这仍然不起作用，双击仍会导致全屏显示。

<iframe src="Player.html" allow="autoplay; encrypted-media" donotallowfullscreen></iframe>

还有什么方法可以阻止视频进入全屏模式？我尝试在 Google 上搜索，但所有结果都参考了 Youtube 的视频嵌入。

不知道为什么需要，但这里有完整的可重现代码......

索引.html

<html>
<body>
<iframe donotallowfullscreen src="Iframe.html"></iframe>
</body>
</html>

iframe.html

<html>
<body>
<video controls src="video.mkv"></video>
</body>
</html>

【问题讨论】：

欢迎。 stackoverflow.com/help/mcve
不知道为什么有必要，它可以通过启用控件的页面上的视频进行复制，或者使用带有 donotallowfullscreen 集的源到视频页面的 iframe 来复制。但可以肯定的是，我用毫无意义的可重现代码进行了编辑。我的代码没有问题，问题在于视频控件强制全屏。只是寻找一种方法来覆盖它。

标签： javascript css html5-video fullscreen

【解决方案1】：

有controlsList attribute正在定义中，但在正式发布之前还有some issues需要整理，目前似乎只在Blink浏览器中实现 .

video{ max-height: 100vh; }

<video  controls
  src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm"></video>

我没有检查 IE，但是对于 Safari，当

因此，在所有浏览器中实现此功能的唯一方法是完全制作您自己的控件，并阻止对

【讨论】：

【解决方案2】：

只是我添加了 controlsList="nofullscreen" 属性。但是点击中心播放视频是行不通的。所以我添加了 onclick="vd.play()" 属性。 <video id="vd" src="video.mp4" onclick="vd.play()" disablePictureInPicture controls controlsList="nofullscreen"></video>

【讨论】：