用户代理样式表在innerHTML

Question

我试图这样做：

document.getElementById(showPlayerId).innerHTML = '<audio id="audioPlayer" class="volume-on" onended="audioEnded()"> <source id="mp3Audio" src="#" type="audio/mp3"> Not supported. </audio>';

但由于用户代理样式表，该元素未显示：

audio:not([controls]) {
    display: none;
}

有人有一些建议如何解决这个问题？该播放器是定制的，我不想要默认控制按钮。

如果我添加controls="controls"它有效，但我不希望这样。

Answer 1

在HTML audio或video元素上关闭控件会隐藏所有控件（通常会出现在元素上），包括搜索栏和时间。没有控件的video元素只显示视频内容，而没有控件的audio元素是不可见的。

如果您想在audio或video元素上设置一组自定义控件，则需要自己构建所有控件。 （There are ways to hide specific controls，但它们不能跨浏览器移植，因为控件的阴影DOM在所有浏览器上的设计方式不同。）