logo标签列表

双击禁用全屏？

javascriptcsshtml5-videofullscreen
3
我有一个应用程序，它在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视频嵌入的参考。

不确定为什么需要这样做，但下面是完整可重现的代码....

Index.html

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

Iframe.html

<html>
<body>
<video controls src="video.mkv"></video>
</body>
</html>
欢迎。https://stackoverflow.com/help/mcve - Andy Hoffman
1
不确定为什么需要这样做，只需在启用控件的页面上放置视频或将源设置为具有donotallowfullscreen属性的视频页面的iframe即可重现。但是，我已经编辑了无意义的可重现代码。我的代码没有问题，问题在于视频控件强制全屏。只是寻找一种覆盖它的方法。 - user13041015
3个回答
2

目前有一个正在定义中的 controlsList 属性，但在它正式发布之前还有一些问题需要解决，目前看来只有 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，当全屏请求由
1

我刚刚添加了controlsList="nofullscreen"属性。但是单击中心播放视频不起作用。所以我添加了onclick="vd.play()"属性。<video id="vd" src="video.mp4" onclick="vd.play()" disablePictureInPicture controls controlsList="nofullscreen"></video>

1

这对我来说可以防止Flowplayer双击全屏

flowplayer(function( _, __, video) { video.addEventListener('dblclick', (e) => { e.preventDefault(); }).

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接