<video> 从 Javascript 更改多个标签的属性

Question

我可以在运行时更改HTML5视频的来源，如下所示：

<video autoplay></video>
<script>
var video = document.querySelector('video');
video.src = "http://new/url";
</script>

但是，如果我在页面上有多个视频，我如何在脚本中引用它们中的每一个并访问它们各自的属性？

我能为视频实体提供名称字符串吗？我希望能够做这样的事情：

<video name="video0" autoplay></video>
<viedo name="video1" autoplay></video>
<script>
video0.src = "http://first/url";
video1.src = "http://second/url";
</script>

Answer 1

这将获得所有video标签的HTMLCollection

var videos = document.querySelectorAll('video');

您可以使用按名称选择它们

var videos = document.querySelector('video[name="video0"]');

Answer 2

为元素分配一个唯一的ID属性并使用document.getElementById()，或者使用document.getElementsByTagName('video')检索页面上的所有video。

Answer 3

我建议用纯JS:通过标签名称检索它们

var videos = document.getElementsByTagName('video');
for (var i = 0; i < videos.length; i++) {
videos[i] // the i-th video
}

如果你对jQuery持开放态度，你也可以对jQuery做同样的事情：

var videos = $('video');
videos.each(function (index, videoElement) {
// this refers to the current video.
});

Answer 4

您可以提供id。为了方便地访问节点，我建议使用jQuery:

<video id="video0" autoplay></video>
<video id="video1" autoplay></video>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var video0 = $('#video0');
var video1 = $('#video1');
video0.attr('src', 'http://first/url');
video1.attr('src', 'http://second/url');
});
</script>