如何隐藏HTML video默认播放按钮 自定义播放控制功能实现问题咨询

问题原因 #

你修改的SVG播放按钮是浏览器为video元素内置控件的动态生成元素，每次视频切换为暂停状态时，浏览器会重新渲染控件区域，自动覆盖你手动设置的opacity属性，因此修改会反复失效。

opacity: 0不是该场景的最优方案：它仅让元素透明，仍然占据布局空间的同时还保留点击响应能力，存在被用户误触的可能。

最优解决方案（推荐） #

优先使用CSS匹配不同浏览器的视频播放按钮伪元素强制隐藏，一劳永逸，稳定性和性能远高于JS动态修改：

/* 适配Chrome、Edge、Safari等WebKit内核浏览器 */
#myVideo video::-webkit-media-controls-start-playback-button,
#myVideo video::-webkit-media-controls-play-button {
    display: none !important;
    -webkit-appearance: none;
}

/* 适配Firefox浏览器 */
#myVideo video::-moz-media-controls-play-button {
    display: none !important;
}

/* 如果你完全不需要所有原生控件，直接删除video标签的controls属性即可，无需额外配置 */

如果你的业务场景不需要任何原生控制条，直接删掉<video>标签的controls属性即可彻底移除所有原生控件，无需额外隐藏按钮。

现有JS代码修复方案 #

如果必须用JS实现，你现有代码的逻辑问题+动态渲染问题可以通过以下方式修复：

1. 补全if-else的花括号包裹逻辑块
2. 监听视频pause/play事件，每次状态变更都强制重设样式，同时用setProperty加!important提升样式优先级覆盖浏览器默认设置：

var myVideo = document.getElementById("myVideo").firstChild; 
var btnVid = document.getElementById("btnVideo");

// 初始化隐藏按钮
hidePlayBtn();
// 监听视频状态变更事件，每次状态切换都重新隐藏按钮
myVideo.addEventListener('pause', hidePlayBtn);
myVideo.addEventListener('play', hidePlayBtn);

btnVid.addEventListener('click', function playPause(e) {
  e.preventDefault();
  if (myVideo.paused) {
    myVideo.play(); 
  } else {
    myVideo.pause();
  }
  hidePlayBtn();
});

function hidePlayBtn() {
  const playBtn = myVideo.parentElement.lastChild;
  if(playBtn) {
    // 直接设置display:none比opacity更彻底
    playBtn.style.setProperty('display', 'none', 'important');
  }
}

内容的提问来源于stack exchange，提问作者giovanni simoes delsoto