Css 在html5音频播放器时间表上创建样式

我想在html5音频播放器上制作一个样式

    <audio id="player" controls="controls">
        <source src="song.ogg" type="audio/ogg" /> 
        <!-- using mozilla firefox -->
        Your browser does not support HTML5 audio. Please upgrade your browser.
    </audio>

您的浏览器不支持HTML5音频。请升级您的浏览器。

有没有可能将css样式放在html5通用音频播放器的时间线上

---

-谢谢。

Youtube有自己的HTML5视频时间表，以防有人想“尝试新东西”（或者只是简单地下载一些他们的无广告WebM视频），所以我知道这是可能的。我猜你需要这样做：

 <audio id="player" ><!--notice how you get rid of the controls -->
        <source src="song.ogg" type="audio/ogg" /> <!-- using mozilla firefox -->
        Your browser does not support HTML5 audio. Please upgrade your browser.
    </audio>

更新状态/进度。您肯定希望至少使用onTimeUpdate

同时，您可以使用边框半径=（宽度/2）为圆的方形标记创建自己的DOM控制器，或者只使用一个矩形标记。我建议您研究一种对用户和其他脚本隐藏功能的方法。
如果您只想向用户显示音乐播放的距离而不允许用户搜索，请使用标签或标签。否则，可以使用标记并将其样式化。别忘了添加一个onInput处理程序来跳过轨迹

编辑

我没有看到那张照片。你一定是在我回答的时候上传的。我建议你使用一个过滤器，但除了图像，这可能对任何东西都不起作用。尝试将div设置为透明，然后

编辑#2

事实证明，背景颜色会根据背景颜色对播放器（仅音频播放器）进行镀铬着色，但播放时间颜色不会随背景颜色或颜色而改变。你可以通过自定义播放器完全控制和统一你的风格，但这对你来说意味着额外的工作。我希望我的回答能有所帮助。
以下代码粘贴到Chrome的开发者控制台时，会显示一个描述音频元素结构的文档片段：

var aud = document.createElement('audio');
document.querySelector('body').appendChild(aud);
aud.controls = true;

转到chrome调试器的“元素”选项卡将显示此文档片段：

<div>
 <div>
  <div>
   <input type="button">
   <input type="range" precision="float" max="0">
   <div style="display: none;">0:00</div>
   <div>0:00</div>
   <input type="button">
   <input type="range" precision="float" max="1" style="display: none;">
   <input type="button" style="display: none;">
   <input type="button" style="display: none;">
  </div>
 </div>
</div>


0:00
0:00

如果有一种方法可以在不重新定义内部结构（即阴影DOM）的情况下更改时间显示或播放/暂停按钮的样式，则可以通过该文档片段。没有一个函数或属性表明能够访问上述文档片段。
是否可以在通用播放器上使用css（播放器未隐藏）？抱歉，这不是我想要的。我一直得出错误的结论：~|最后一次编辑是我在没有深入研究的情况下所能做的最好的编辑。由于不同浏览器的播放器不同，因此没有标准的方式来设置文本样式和滚动视图，并保留原始播放器。你甚至没有在Chrome on hover中弹出时间。但是时间线出现在firefox、Chrome和opera中。有没有什么方法可以设计通用html5音频播放器的时间轴？我发现了一个类似但更一般的问题。看起来没有一个答案对你想要的有用，只是重复了很多已经说过的内容。我通过在音频标签上应用css，在图片中设置了边框半径和背景颜色的样式。但不能在时间轴上这样做，这就是我想做的。这是否可能仅通过css（而不是javascript播放器）在时间轴上创建样式？通过@jessegibbons根据这个问题链接到跨浏览器信息，但在firefox中，输入类型“范围”显示为文本框，看起来不像chrome或opera范围。但是html音频时间线仍然出现在firefox中，这与textbox不同。那么，有没有办法在通用的html5播放器时间线上创建css样式呢？你刚刚证明了媒体控制器不是统一的，根据定义，不是通用的。目前还没有HTML5/CSS3标准来设计媒体元素的内部工作方式，但我已经做了一些研究，如果我能成功的话，我将向您展示如何做到这一点。不幸的是，我只能从Shadow DOM中发现这些东西，所以在进一步通知之前，只能包括支持Chrome、Opera和Shadow DOM的浏览器。请仔细阅读我的博客文章，并告诉我你的想法。我知道它并没有给你一种方式来设计一个通用的媒体控制器，但我希望它能解释为什么没有一些自定义的HTML是不可能的，以及如果可能的话你会如何理解它。谢谢你的博客链接。这解决了chrome的问题。但是opera呢？我试过音频：：-o-media-controls-timeline{背景色：绿色；宽度：800px；}但这不起作用（其中-webkit-media-controls-timeline适用于chrome）。而且我在firefox上仍然遇到麻烦。由于输入类型“range”不支持firefox，所以我无法用timeline创建自己的播放器。那么有没有办法为firefox设计timline？我刚刚测试了它，它在最新版本的opera（15.0+）上工作，因为opera现在是一款webkit浏览器。它还应该与Safari配合使用，因为Safari基于Webkit。我知道它与Maxthon一起工作，这是一款中文webkit浏览器。这是你通常需要担心的浏览器的一半，加上Maxthon。