CODEWITHSUNDEEP
javascripthtml
Rolando
Rolando

Reputation: 62704

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. If I explicitly type out the HTML only one of them loads an the other does not (same behavior).

How do I resolve this?

Upvotes: 2

Views: 396

Answers (1)

Neil
Neil

Reputation: 8121

You are going to kick yourself over this one, you have copied and pasted no doubt? The second video src is not set, you merely overwrite the first:

video.setAttribute("src", "pathtomyvideo.mp4");

Change to 

video2.setAttribute("src", "pathtomyvideo.mp4");

Just tested and works like a charm...

Upvotes: 2

Related Questions