时间戳

首页 > 解决方案 > 如何在 Wordpress HTML5 视频中禁用画中画模式

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

问题描述

尊敬的社区成员您好！

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

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

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

示例：具有视频背景的部分/画中画部分

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

  1. 关于使用disablePictureInPicture属性。
  2. 苹果avpictureinpicture 控制器

标签： htmlvideobrowserelementorpicture-in-picture

解决方案

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

推荐阅读