CSS 样式 <音频>

Question

有没有办法为 <audio> 的时间轴缩略图(搜索者)设置样式？标签？我可以使用 audio::-webkit- 来定位和设置大部分元素的样式影子 DOM 伪选择器。

但是，我很不幸地找到了一个选择器来匹配播放时间轴拇指。由 <input type="range"> 完成，另一个影子 DOM 元素。所以基本上我试图在另一个影子 DOM 伪元素中定位影子 DOM 伪元素。

我的 Playground 在https://jsfiddle.net/cLwwwyh5/ .

我只需要它在 Chrome 中工作(Chrome 应用程序)

Answer 1

浏览可用修饰符列表:

audio::-webkit-media-controls-panel
audio::-webkit-media-controls-mute-button
audio::-webkit-media-controls-play-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

除非我遗漏了它，否则目前似乎不可能通过 CSS 设置时间轴缩略图的样式。

但是你已经很接近让一切看起来都正确了，argg!因此，我很难建议使用类似 MediaElement.js 的东西，或创建您自己的自定义播放器，如 this jsFiddle .然而，它确实带来了跨浏览器工作的额外好处，所以这很重要。