Simultaneous loading of same source HTML5 video fails?
===

I have a simple test page here:

    <!DOCTYPE HTML>
    <html>
        <head>
            <title>Event "seeked" test</title>
        </head>
        <body>
            <div id="main" align="center"></div>
            <script>
                var main = document.getElementById("main");
                var thumbnails = document.getElementById("thumbnails");
    
                var video = document.createElement("video");
                video.setAttribute("id", "video");
                video.setAttribute("src", "pathtomyvideo.mp4");
                video.setAttribute("controls", "true");
                video.setAttribute("autoplay", "true");
                main.appendChild(video);
    
                var video2 = document.createElement("video");
                video2.setAttribute("id", "video2");
                video.setAttribute("src", "pathtomyvideo.mp4");
                video2.setAttribute("controls", "true");
                video2.setAttribute("autoplay", "true");
                main.appendChild(video2);        
            </script>        
          </body>
    </html>

In Chrome, only a single Video file loads while the other does not appear to load. When the two sources are different it loads fine. How do I resolve this?