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

编程问答 2022-05-18

问题描述

亲爱的社区成员你好！

我已将视频背景设置为 Elementor 部分。

问题：通过 Firefox（从计算机）和 iPhone 浏览器查看页面时，会出现一个上下文菜单，允许在单独的窗口（“画中画”）中查看视频。 如果我正在考虑在视频顶部带有补充元素的视频页面设计，则此功能会破坏整个想法。如果您单击画中画上下文菜单，来自 Elementor 部分的视频将消失，整个部分为空。我不希望用户能够（无意或有意地）在视频页面上执行此操作。

我请您为这个问题提出一个可能的解决方案，以排除浏览器对视频的任何干扰。如何关闭视频元素的画中画？

示例：section with video background / picture-in-picture section

我找到了几种故障排除方法，但没有足够的技术知识来了解如何实施它们：

  1. 关于使用 disablePictureInPicture 属性。
  2. 苹果avpictureinpicturecontroller

解决方法

<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>
browserbrowserelementorhtmlpicture-in-picturevideovideo