javascript - 改变多个属性来自 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

我建议使用纯 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 3

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

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>