如何在HTML5视频上禁用图片模式下的图片

根据规范 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>

此代码适用于页面上的所有视频,并禁用下载、拍照和右键单击上下文,其中还包含下载选项。

你可能想要改变 jQuery $ 我写了这段代码,将其添加到WordPress中的主题中,以禁用我网站中所有视频的下载。

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