如何从 Safari 中仅隐藏画中画 (PiP) 控件答案

【问题标题】：How to hide only Picture in Picture (PiP) control from safari如何从 Safari 中仅隐藏画中画 (PiP) 控件
【发布时间】：2018-08-09 02:43:31
【问题描述】：

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

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

【问题讨论】：

dailymactips.com/how-to-turn-off-picture-in-picture-in-ios
和this 建议您必须启用它，即默认未启用 - 也许该问题中的某些内容会有所帮助
@JaromandaX 感谢您的快速回复。我已经尝试过这种方法，但它不起作用。
我必须通过脚本在 html5 视频播放器中完成
是的，因为搜索时实际上有数百个结果，而我提到的两个你声称已经尝试过，你只需要等待真正知道的人：p

标签： javascript html macos css safari

【解决方案1】：

disablePictureInPicture 属性现在可以用于此目的

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

这里有详细信息： https://wicg.github.io/picture-in-picture/#disable-pip

【讨论】：

适用于 Chrome 但不适用于 Safari。

【解决方案2】：

似乎没有任何官方方法可以做到这一点......

目前在 Safari 中是全有或全无（使用 controls=false）。

shadow-targetting pseudo elements selectors 似乎在此浏览器上不起作用，这与 Blink 浏览器不同，尽管我在 Internet 上找到了 ::-webkit-media-controls-picture-in-picture-button 的引用。

因此，就目前而言，唯一的解决方案是禁用视频元素的所有默认控件并构建您自己的控件。
如果你愿意，你可以让它有条件：

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

对于未来，可能会有一个controlsList 属性，drafts specs 目前只处理nodownload、nofullscreen 和noremoteplayback，但我不明白为什么nopicture-in-picture 无法实现它那样的话，如果这个属性（主要是由 Blink 浏览器推动的，再一次）从草稿中消失。

【讨论】：

"@Kaiido 感谢您的建议。我将与我的客户讨论自定义控件，看来这只是解决方案。