admin 管理员组文章数量: 1086019
I have an app which loads a webpage in a webview2 control (Edge Chromium), the page it's loading simply contains a html5 video tag with source and a bit of css for styling.
The css I'm using makes the video take up the full area of the browser page which is working fine, but I want to disable the ability to enter fullscreen (as in, taking up full area of desktop).
I can hide the fullscreen button in css by doing:
::-webkit-media-controls-fullscreen-button {
display: none !important;
}
But the video can still enter fullscreen when double-clicked.
I've tried moving the video to a secondary page sourced in an iframe with donotallowfullscreen but this still doesn't work, double-clicking still results in fullscreen.
<iframe src="Player.html" allow="autoplay; encrypted-media" donotallowfullscreen></iframe>
What else can I try to prevent the video from entering fullscreen? I've tried searching around on Google but all of the results are in reference to Youtube's video embedding.
Not sure why necessary, but here's full reproducible code....
Index.html
<html>
<body>
<iframe donotallowfullscreen src="Iframe.html"></iframe>
</body>
</html>
Iframe.html
<html>
<body>
<video controls src="video.mkv"></video>
</body>
</html>
I have an app which loads a webpage in a webview2 control (Edge Chromium), the page it's loading simply contains a html5 video tag with source and a bit of css for styling.
The css I'm using makes the video take up the full area of the browser page which is working fine, but I want to disable the ability to enter fullscreen (as in, taking up full area of desktop).
I can hide the fullscreen button in css by doing:
::-webkit-media-controls-fullscreen-button {
display: none !important;
}
But the video can still enter fullscreen when double-clicked.
I've tried moving the video to a secondary page sourced in an iframe with donotallowfullscreen but this still doesn't work, double-clicking still results in fullscreen.
<iframe src="Player.html" allow="autoplay; encrypted-media" donotallowfullscreen></iframe>
What else can I try to prevent the video from entering fullscreen? I've tried searching around on Google but all of the results are in reference to Youtube's video embedding.
Not sure why necessary, but here's full reproducible code....
Index.html
<html>
<body>
<iframe donotallowfullscreen src="Iframe.html"></iframe>
</body>
</html>
Iframe.html
<html>
<body>
<video controls src="video.mkv"></video>
</body>
</html>
- Wele. stackoverflow./help/mcve – Andy Hoffman Commented Mar 10, 2020 at 19:48
- 1 Not sure why necessary, it can be reproduced with just a video on page with controls enabled, or iframe with source to video page with donotallowfullscreen set. But sure, I edited with the pointless reproducible code. There's no issue with my code, the problem is with video controls forcing fullscreen. Just looking for a method to override it. – user13041015 Commented Mar 11, 2020 at 1:26
3 Answers
Reset to default 3Just I added controlsList="nofullscreen" attribute. But playing the video on click on the center of won't work. So I added onclick="vd.play()" attribute. <video id="vd" src="video.mp4" onclick="vd.play()" disablePictureInPicture controls controlsList="nofullscreen"></video>
There is the controlsList attribute which is in the process of being defined, but there are still some issues to sort out before it's official, and currently it seems to be implemented only in Blink browsers.
video{ max-height: 100vh; }<video controls
src="https://upload.wikimedia/wikipedia/mons/a/a4/BBH_gravitational_lensing_of_gw150914.webm"></video>I didn't checked for IE, but for Safari, they don't even respect the allow of an <iframe> when the fullscreen request has been made by the <video>'s controls, because this fullscreen mode is not the one defined by the Web-API, but rather a native mode. This is also why in this browser we can't even call document.[vendor]ExitFullscreen() (in Firefox this would work because their current UI is using the Web-API).
So the only way to make this work in all browsers would be to make your own controls entirely, and to block the clicks on your <video> element (pointer-events: none).
this works for me to prevent flowplayer double click to full screen
flowplayer(function( _, __, video) { video.addEventListener('dblclick', (e) => { e.preventDefault(); }).
本文标签： javascriptDisable fullscreen on doubleclickStack Overflow
版权声明：本文标题：javascript - Disable fullscreen on double-click? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744099085a2533414.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论