使样式在html5音频播放器时间安排 [英] make style on html5 audio player timeline

问题描述

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

I want to make a style on html5 audio player.

    <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通用音频播放器时间轴上？

Is it possible to put css style on the html5 generic audio player timeline?

-thanks。

推荐答案

Chrome的开发者控制台显示了一个描述音频元素结构的文档片段：

The following code, when pasted into Chrome's developer console, reveals a document fragment that describes the audio element's structure:

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

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

Going to the chrome debugger's elements tab reveals this document fragment:

<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），它将通过该文档片段。没有函数或属性表明访问所述文档片段的能力。

If there was a way to change the style of the time display or the play/pause button without redefining the inner structure(i.e. shadow DOM), it would be through that document fragment. There is neither a function nor an attribute that suggests the ability to access said document fragment.

这篇关于使样式在html5音频播放器时间安排的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！