Question

I can change the source of an HTML5 video at runtime like this:

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

But if I have multiple video’s on the page how do I refer to each of them in the script and access their individual attributes?

Am I able to provide a name string for the video entities? I am expecting to be able to do something like this:

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

Answer 1

Either assign the elements a unique ID attribute and use document.getElementById(), or use document.getElementsByTagName('video') to retrieve all videos on the page.