如何在 HTML5 视频中禁用画中画模式

Posted 2023-05-08

【中文标题】如何在 HTML5 视频中禁用画中画模式

【英文标题】：How to disable Picture in Picture mode on HTML5 video

【发布时间】：2019-06-24 19:00:39

【问题描述】：

如何在 html5 视频中禁用画中画模式？

请注意，我指的不是question，它与 苹果的 AVKit

我知道你可以用controlsList="nodownload"禁用视频下载，画中画模式怎么可能。

<video controls controlsList="nodownload">
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
</video>

【参考方案1】：

根据https://wicg.github.io/picture-in-picture/#disable-pip 的规范， 控制它的属性是disablePictureInPicture

<video controls disablePictureInPicture controlsList="nodownload">
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
</video>

通过javascript实现同样的效果：

<video id="vid" controls muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4">
</video>
<script>
vid=document.getElementById("vid")
vid.disablePictureInPicture = true
</script>

【讨论】：

@m93a 与 macOS 上的 76 相同。猜猜有一个需要报告的错误......

我认为kitsune 不适合举报此问题。 Bugzilla 是报告 Firefox 错误的地方。

是的，我做了之后才意识到！随时举报

bugzilla.mozilla.org/show_bug.cgi?id=1611831 Mozilla 认为不遵循规范是一项功能。

也适用于 Opera 烦人的弹出功能！

【参考方案2】：

如果你想通过 JavaScript 来实现。 此代码适用于您页面上的所有视频，它会禁用下载、拍照和右键单击上下文，其中还包含下载选项。

您可能希望将jQuery 更改为$ 我编写了这段代码，将其添加到我在 WordPress 中的主题中，以禁用我网站中所有视频的下载。

jQuery('video').on("loadeddata", function() 
    jQuery('video').attr('controlsList', 'nodownload');
    jQuery('video').bind('contextmenu',function()  return false; );
    jQuery('video').attr('disablePictureInPicture', 'true');
); 

【讨论】：

请注意，您正在应用属性并将函数绑定到页面的所有 ，每个元素都会触发loadeddata 事件。您必须在 loadeddata 事件处理程序中将 jQuery('video') 替换为 jQuery(this)。

【参考方案3】：

使用这个：

<video controls disablePictureInPicture>

disablePictureInPicture 是一个布尔标志，将禁用三点菜单中的画中画项。