HTML5 video picture-in-picture模式位置设置及:picture-in-picture伪类使用问题咨询

问题1：强制画中画窗口在指定位置弹出的实现方案 #

目前W3C的Picture-in-Picture标准没有开放自定义画中画窗口弹出位置的API，画中画窗口的位置、尺寸、层级均由浏览器内核统一管理，默认记忆上次用户调整的位置是浏览器的通用实现，目的是避免网站随意调整弹窗位置干扰用户操作，没有公开的标准方法可以强制覆盖该行为。
仅可通过非标准的兼容方案尝试调整：部分浏览器的画中画初始弹出位置和原video元素在当前视口的位置相关，你可以在触发requestPictureInPicture()的用户交互回调中，先将video元素临时定位到你期望的对应视口位置，触发画中画后再将video元素复位，该方案不保证跨浏览器生效，仅可在特定浏览器版本中使用。 #

问题2：:picture-in-picture伪类的使用说明 #

:picture-in-picture是CSS标准中定义的伪类，用于匹配当前处于画中画模式的video元素，但该伪类的浏览器支持度有限：

• Chromium内核浏览器（Chrome、Edge等）需要110及以上版本才支持
• Firefox目前默认关闭该特性，需要用户手动修改浏览器配置开启
• Safari暂未支持该伪类
  你遇到的“未知伪类选择器”提示通常有两个原因：一是当前运行的浏览器版本不支持该伪类，二是代码校验工具的规则未更新到最新CSS标准，将未广泛支持的伪类识别为非法选择器。
  需要注意：该伪类的样式是作用在页面内的原video元素上，无法修改弹出的画中画窗口的样式，画中画窗口的UI完全由浏览器控制。
  如果需要兼容更多浏览器，可以通过监听Picture-in-Picture的JS事件替代原生伪类实现相同效果，示例代码如下：

const videoEl = document.querySelector('#your-video');
// 监听进入画中画事件
videoEl.addEventListener('enterpictureinpicture', () => {
  videoEl.classList.add('pip-active');
});
// 监听退出画中画事件
videoEl.addEventListener('leavepictureinpicture', () => {
  videoEl.classList.remove('pip-active');
});

对应的CSS样式：

.pip-active {
  /* 自定义原视频进入画中画后的样式 */
  opacity: 0.3;
  pointer-events: none;
}

内容的提问来源于stack exchange，提问作者Maayan Hope