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

问题描述 投票:0回答:4

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

请注意,我不是指这个与以下相关的问题 苹果的 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>

html5-video
4个回答
81
投票

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

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

备注:

1-您正在应用属性并将函数绑定到页面的所有

<video>
元素,每个元素都会触发 loaddata 事件。您必须在
jQuery('video')
事件处理程序中将
jQuery(this)
替换为
loadeddata

2-

disablePictureInPicture
大多数浏览器都支持,但并非全部 disablePictureInPicture 随着时间的推移它可以获得更多的支持。


1
投票

使用这个:

<video controls disablePictureInPicture>

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


0
投票

pip 仍然被阻止,但我可以看到 pip 的弹出窗口 pip 弹出窗口显示

© www.soinside.com 2019 - 2024. All rights reserved.