Creating Two Html5 Video Elements With The Same Source Not Working

I am trying to do a simple thing but so far I have not had any success and I cannot get why it does not work. I need two (or several, for that matter) HTML5 video elements to play

Solution 1:

Just ran into this problem myself. I worked around it by adding a query param to the source file of the second video element’s source:

video1.setAttribute("src", "whatever.mp4");
video2.setAttribute("src", "whatever.mp4?random=1");

http://jsfiddle.net/br2bn/

Solution 2:

Though I am still not able to just comment, I have to submit this as an answer.

This bug continuous for files > 10mb as long as one of them is buffering, the other one wont work. If you press pause, the other one will work.

I updated the example to demonstarate the bug: http://jsfiddle.net/4K8DZ/23/

Solution 3:

Actually, I can play only one video with iPad + Safari and Chrome on Windows7. With Safari, if I start one video, then another stops. With Chrome, I got almost the same result.