设置HTML Video元素controls=true后默认控件不显示，如何解决？

针对你遇到的控件不显示问题，可以从以下几个方向排查解决：

• 确保video元素已挂载到DOM
  你只创建了video元素，但如果没有将它添加到页面的DOM结构中，浏览器不会渲染该元素，控件自然无法显示。添加一行代码将元素插入到目标容器：

  // 替换成你实际的容器选择器或DOM对象
  const container = document.querySelector('.your-container');
  container.appendChild(this._player);
  

• 检查是否有CSS隐藏了控件
  自定义样式可能意外覆盖默认控件的显示，比如通过伪元素隐藏控件，或者video元素的overflow: hidden导致控件被裁剪。检查样式表，移除这类规则：

  /* 避免这类会隐藏控件的样式 */
  video::-webkit-media-controls {
      display: none !important;
  }
  

• 验证视频资源是否有效
  如果src指向的视频文件无效、格式不被浏览器支持，或者加载失败，浏览器可能不会触发控件显示。可以通过监听错误事件排查：

  this._player.addEventListener('error', (e) => {
      console.error('视频加载失败:', e.target.error);
  });
  

  同时确保视频格式为浏览器兼容的类型（如MP4、WebM）。

• 调整controls属性的设置方式
  尝试改用setAttribute方法设置控件属性，或者将设置步骤放到元素挂载到DOM之后：

  this._player.setAttribute('controls', '');
  

• 检查元素层级与可见性
  确认容器或video元素没有被其他元素遮挡，比如容器z-index过低，或者video元素被设置了opacity: 0、visibility: hidden等属性。

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