3

我想在 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 通用音频播放器时间线上？

-谢谢。

4

2 回答 2

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>

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

于 2013-07-02T23:03:17.260 回答
1

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

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

编辑

我没有看到那个图像。你一定是在我回答的时候上传的。我建议您使用过滤器，但这可能不适用于图像以外的任何东西。尝试使 div 透明并允许用户单击它

编辑#2

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

于 2013-06-16T02:57:02.357 回答