CSS样式< audio> [英] CSS style <audio>

问题描述

是否有一种方法如何设置< audio> 标签的时间轴缩略图（查找者）我可以使用 audio :: - webkit - shadow DOM伪选择器来定位和设置大部分元素。

但是，我不爽地找到一个选择器来匹配播放时间轴的拇指。它由< input type =range> ，另一个shadow DOM元素完成。所以基本上我试图目标阴影DOM伪元素在另一个阴影DOM伪元素。

我的游乐场在

我只需要在Chrome（Chrome App）中使用

解决方案

查看可用修饰符列表：

  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- -button 
 audio ::  -  webkit-media-controls-rewind-button 
 audio ::  -  webkit-media-controls-return-to-realtime-button 
 audio ::  -  webkit- media-controls-toggle-closed-caption-button 
  

除非我缺少它，通过CSS的拇指现在似乎不可能。

但是你这么接近得到一切看起来正确，argg！因此，建议您使用类似 MediaElement.js 的建议，或者创建您自己的自定义播放器，例如 this jsFiddle 。但是，它确实带来了跨浏览器工作的额外好处，所以这是一件事。

is there a way how to style timeline thumb (seeker) of an <audio> tag? I'm able to target and style most of the element using audio::-webkit- shadow DOM pseudo selectors.

However, I was unlucky finding a selector to match the playback timeline thumb. It's done by <input type="range">, another shadow DOM element. So basically I'm trying to target shadow DOM pseudo element inside another shadow DOM pseudo element.

My playground is on https://jsfiddle.net/cLwwwyh5/.

I just need this to work in Chrome (Chrome App)

解决方案

Going through the list of available modifiers:

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

Unless I'm missing it, styling the timeline thumb through CSS doesn't seem possible at the moment.

But you're so close to getting it all to look right, argg! It therefore pains me to advise using something like MediaElement.js, or creating your own custom player like in this jsFiddle. It does, however, come with the added bonus of working cross-browser, so that's something.

这篇关于CSS样式< audio>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！