使用JavaScript停止所有HTML5音频/视频

Question

我试图编写一个函数来暂停所有的HTML5音频和视频。

我已经有了这个，但是我不确定这是否是正确的方法？

function stopAll() {
var media = document.getElementsByClassName('media'),
    i = media.length;

while (i--) {
    media[i].pause();
}
}

http://jsfiddle.net/m6AkC/

- Alistair

---

看起来不错。你可以直接针对音频和视频元素进行操作。原样能行吗？ - fauverism

Answer 1

那样是可以的。在你的 fiddle 中，你必须确保源标签已关闭，并且没有选择 no wrap - in。

问题实际上出在你的 fiddle 上。你需要确保在 Frameworks & Extensions 上方左侧的选项中选择 no wrap - in head。请参见更新的 fiddle @ http://jsfiddle.net/m6AkC/2/。

<audio class="media" id="audioplayer" controls>
<source src="http://download.wavetlan.com/SVV/Media/HTTP/BlackBerry.mp4" type="audio/mpeg">
    <source src="audio/macdemarco.ogg" type="audio/ogg">Your browser does not support this audio format.</audio>
<video class="media" width="340" height="200" controls>
<source src="http://download.wavetlan.com/SVV/Media/HTTP/BlackBerry.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.</video>
<br>
<a href="#" onclick="stopAll()" id="next">Stop</a>

- Nick

---

你没有回答问题，唯一做的事情就是建议更糟糕的标记。请学习HTML：http://www.w3.org/TR/html-markup/source.html#source-tags | http://www.w3.org/TR/html-markup/syntax.html#void-element - alexander farkas

@alexander-farkas - 感谢您指出错误。我只是试图修复标记，因为jsfiddle将其标记为不正确，并且我没有意识到source标记是空标记。 - Nick