能否移除画中画（Picture-in-Picture）模式下的控制按钮？

我之前刚好碰到过这个问题！确实官方文档只说了怎么添加额外操作，完全没提移除默认控件的方法，不过有两个靠谱的方案可以试试：

方案1：用CSS直接隐藏原生控件 #

大部分现代浏览器的画中画控件支持通过私有CSS选择器隐藏，针对不同浏览器写对应的样式即可：

/* 针对 Chrome/Edge 浏览器 */
::-webkit-media-controls-picture-in-picture-button {
  display: none !important;
}
::-webkit-media-controls-fullscreen-button {
  display: none !important;
}
::-webkit-media-controls-settings-button {
  display: none !important;
}

/* 针对 Firefox 浏览器 */
::-moz-media-controls-picture-in-picture-button {
  display: none !important;
}
::-moz-media-controls-fullscreen-button {
  display: none !important;
}
::-moz-media-controls-settings-button {
  display: none !important;
}

小贴士：这种方法依赖浏览器的私有前缀，不同浏览器的选择器可能会有更新，建议在目标浏览器上测试兼容性。

方案2：自定义画中画容器（更稳定可控） #

如果CSS隐藏的方式不够稳定，你可以完全自定义画中画的UI，彻底摆脱原生控件的限制：

1. 先阻止原生画中画的触发：

const videoElement = document.querySelector('video');

// 拦截原生PiP触发事件
videoElement.addEventListener('enterpictureinpicture', (event) => {
  event.preventDefault();
  // 启动自定义画中画逻辑
  openCustomPictureInPicture();
});

2. 创建自定义浮动窗口并控制UI：

function openCustomPictureInPicture() {
  // 创建自定义PiP容器
  const customPiP = document.createElement('div');
  customPiP.style.position = 'fixed';
  customPiP.style.bottom = '20px';
  customPiP.style.right = '20px';
  customPiP.style.width = '320px';
  customPiP.style.height = '180px';
  customPiP.style.zIndex = '9999';
  customPiP.style.backgroundColor = '#000';
  customPiP.style.borderRadius = '8px';
  customPiP.style.overflow = 'hidden';

  // 克隆视频元素并继续播放
  const clonedVideo = videoElement.cloneNode(true);
  clonedVideo.play();
  customPiP.appendChild(clonedVideo);

  // 只添加你需要的控件（这里示例只加关闭按钮）
  const closeBtn = document.createElement('button');
  closeBtn.textContent = '×';
  closeBtn.style.position = 'absolute';
  closeBtn.style.top = '4px';
  closeBtn.style.right = '8px';
  closeBtn.style.background = 'rgba(0,0,0,0.5)';
  closeBtn.style.color = '#fff';
  closeBtn.style.border = 'none';
  closeBtn.style.fontSize = '18px';
  closeBtn.style.cursor = 'pointer';
  
  closeBtn.addEventListener('click', () => {
    customPiP.remove();
    clonedVideo.pause();
  });
  customPiP.appendChild(closeBtn);

  document.body.appendChild(customPiP);
}

这种方法的好处是完全由你控制UI，想加什么控件就加什么，彻底避免原生默认控件的问题。

内容的提问来源于stack exchange，提问作者Kenny La