如何从 safari 中仅隐藏画中画 (PiP) 控件

Question

我只需要从 safari 浏览器中隐藏一个视频控件，即画中画 (PiP)。有什么解决办法吗？

我们可以使用 HTML5 隐藏它吗？

Answer 1

现在可以使用disablePictureInPicture属性

<video disablepictureinpicture controlslist="nodownload"></video>

详情请见：https : //wicg.github.io/picture-in-picture/#disable-pip

Answer 2

官方好像没有什么办法可以做到这一点...

目前在 Safari 中，要么全有，要么全无（使用controls=false）。

与 Blink 浏览器不同，阴影目标伪元素选择器似乎在此浏览器上不起作用，尽管我::-webkit-media-controls-picture-in-picture-button在 Internet 上找到了 的参考。

因此，今天唯一的解决方案是禁用视频元素的所有默认控件并构建您自己的控件。
如果您愿意，您可以将其设置为有条件：

if(typeof vidElem.webkitSupportsPresentationMode === 'function' &&
  vidElem.webkitSupportsPresentationMode('picture-in-picture') ) {
    vidElem.controls = false;
    buildCustomControls(vidElem);
}

对于未来，可能会有一个controlsList属性，它的草案规范目前仅处理nodownload,nofullscreen和noremoteplayback，但我不明白为什么 anopicture-in-picture无法到达那里，如果这个属性（再次主要由 Blink 浏览器驱动）消失了的草稿。