Question

我需要一个只有播放/暂停按钮的纯html5音频标签。

感谢这些链接： https://gist.github.com/afabbro/3759334 http://trac.webkit.org/browser/trunk/Source/WebCore/css/mediaControls.css

我已经能够找出组成音频控件的大部分（令人惊讶的未记录的）-webkit- *伪元素，并为它们分配一个＆＃34; display：none＆＃34; CSS中的规则，以便它们不会显示出来。我已经能够使音量控制，静音控制，搜索栏等全部消失，但 MacOS中的Safari 仍会在播放按钮旁边显示文字我说＆＃34; 已加载＆＃34; （或类似的东西：它说＆＃34; Carico＆＃34;意大利语。）

是否可以阻止显示该文本？我猜它属于其他一些伪元素，但我无法找到一种方法来找出哪一个（元素检查员没有帮助）。

我试图应用＆＃34; font-size：0＆＃34;包含伪元素，但它不起作用。

我的样式表：

audio {
    width: 40px;
    height: 40px;
    font-size: 0;
}
audio * {
    font-size: 0;
}

/* https://gist.github.com/afabbro/3759334 */
audio::-webkit-media-controls-enclosure {
    max-width: none; /*or inherit*/
    padding: 0;
    margin: 0;
    font-size: 0 !important;
}
audio::-webkit-media-controls-enclosure * {
    font-size: 0 !important;
}
audio::-webkit-media-controls-panel {
    padding: 0;
    margin: 0;
    width: 40px;
    height: 40px;
    /*background: black;*/
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    font-size: 0 !important;
}

audio::-webkit-media-controls-panel * {
    font-size: 0 !important;
}

audio::-webkit-media-controls-mute-button, audio::-webkit-media-controls-timeline-container, audio::-webkit-media-controls-current-time-display, audio::-webkit-media-controls-time-remaining-display, audio::-webkit-media-controls-timeline, audio::-webkit-media-controls-volume-slider-container, audio::-webkit-media-controls-volume-slider, audio::-webkit-media-controls-seek-back-button, audio::-webkit-media-controls-seek-forward-button, audio::-webkit-media-controls-fullscreen-button, audio::-webkit-media-controls-rewind-button, audio::-webkit-media-controls-return-to-realtime-button, audio::-webkit-media-controls-toggle-closed-captions-button, audio::-webkit-media-controls-closed-captions-container, audio::-webkit-media-controls-closed-captions-track-list {
    display: none;
}

audio::-webkit-media-controls-play-button {
    margin: auto auto auto auto;
    padding: 0;
    /*width: 30px;
    height: 30px;*/
    cursor: pointer;
}

Answer 1

通过浏览WebKit的源代码（或似乎是https://github.com/WebKit/webkit/tree/master/Source/WebCore），我发现了我需要隐藏的伪元素：

这就是最后的诀窍：

audio::-webkit-media-controls-status-display {
    display: none;
}

如何摆脱Safari中html5音频标签中的“已加载”文本

1 个答案: