在 html5 音频播放器时间轴上制作样式

Question

我想在 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>

是否可以将 css 样式放在 html5 通用音频播放器时间轴上？

-谢谢。

Answer 1

以下代码粘贴到 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>

如果有一种方法可以在不重新定义内部结构（即 shadow DOM）的情况下更改时间显示或播放/暂停按钮的样式，那将是通过该文档片段。既没有函数也没有属性表明能够访问所述文档片段。

Answer 2

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>

如果您隐藏了音频播放器，您可以添加Event Listeners 以更新状态/进度。你肯定会想要至少使用 onTimeUpdate

同时，您可以使用带有边框半径 = (width/2) 的方形标签制作自己的 DOM 控制器，或者只使用 .我建议您查看Shadow DOM 以了解对用户和其他脚本隐藏功能的方法。 如果您只想向用户显示音乐播放了多远而不允许用户搜索，请使用标签或标签。否则，您可以使用标签并将其风格化。不要忘记添加一个 onInput 处理程序来跳过轨道。

编辑

我没有看到那张图片。你一定是在我回答的时候上传的。我建议您使用过滤器，但这可能不适用于图像以外的任何东西。尝试在其上设置一个透明的 div 并 allowing the user to click through it

编辑#2

事实证明，背景颜色会根据背景颜色对 Chrome 中的播放器（仅音频播放器）进行着色，但播放时间颜色不会随背景颜色或颜色改变颜色。您可以使用自定义播放器完全控制和统一您的风格，但这意味着您需要额外的工作。希望我的回答对您有所帮助。