Question

我有一个音频标签，其中最初没有显示控件，如果用户点击这样的链接，则显示它们：

var audio = document.getElementById(audioId);
if (audio.paused) {
    audio.src = clip;
    audio.play();
    audio.setAttribute("controls", "controls");
}
else {
    audio.removeAttribute("controls");
    audio.pause();
    audio.currentTime = 0;
}

clip是要播放的音频文件的网址。

音频是这样的：

<audio id="audio1"></audio>

如何设置控件的位置，是否也可以设置它们的大小？

音频标签是列表元素的子元素，对于我定位它们的所有其他列表元素，例如

#track_title {
    position:absolute;
    top: 2px;   
    left: 80px;
    font-size: 15px;
    font-weight: bold;
}

Answer 1

没有办法通过CSS为html5音频标签控制html5音频播放器控件。虽然您可能希望保留默认控件并通过javascript实现自己的控件。

然而，有一个很好的现有的html5可用播放器名为jPlayer，它被证明是非常有用的。

Answer 2

您可以使用Media API构建自己的控件集，允许您像任何其他HTML元素一样通过CSS设置它们的样式。我写了关于如何在Adobe Developer Connection上执行此操作：Working with HTML5 multimedia components – Part 3: Custom controls 。

是否可以设置音频控件的位置和大小？

2 个答案: