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

Question

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

Please note I'm not referring to this question which relates to Apple's 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>

Answer 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>

Answer 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');
});

Answer 3

使用这个：

<video controls disablePictureInPicture>

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

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

How to disable Picture in Picture mode on HTML5 video

html5-video