0

制作一个 html5 播放器，我正在从“带有 id 的 div”转向“简单的 html 元素”。

旧情（作品）

<audio src="track1.mp3" id="audio"></audio>
<controls>
    <play id="play" style="display:none">PLAY</button>
    <pause id="pause" style="display:none">PAUSE</button>
    <div id="progress"><div id="bar"></div></div>
</controls>

Javascript 通过具有 id 的 div 获取元素

var myAudio = document.getElementById('audio');
var play = document.getElementById('play');
var pause = document.getElementById('pause');
... etc

期望的情况（不能完全工作）

<audio src="track1.mp3"></audio>
<controls>
    <play style="display:none">PLAY</play>
    <pause style="display:none">PAUSE</pause>
    <progress><bar></bar></progress>
</controls>

在@grateful 和@Nathan Montez 的帮助下更新了Javascript，部分工作

var myAudio = document.getElementsByTagName('audio')[0];
var play = document.getElementsByTagName('play')[0];
var pause = document.getElementsByTagName('pause')[0];
... etc

在新版本中，进度条不起作用！我们忽略了什么？谢谢！

4

2 回答 2

2

document.getElementsByTagName('audio')将返回一个数组，即使它只有 1 的长度。你需要这样做：

document.getElementsByTagName('audio')[0];
于 2017-07-10T17:09:02.027 回答
1

将评论移至答案：

从标签中删除双引号。

目前<progress"></progress> 它应该阅读<progress></progress>

更新：

我认为您的问题的原因是元素正在解析为HTMLUnknownElements. 因此，您可能需要使用Google Polymer之类的工具来提供您正在寻找的功能。我不认为您可以像这样直接使用未知元素，因为它们没有与原生 HTMLElement 对象相同的 API。

于 2017-07-10T17:22:49.720 回答