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。

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>

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

4 个答案: