Reputation: 240
I have 2 video elements on my test page, like so:
<div id="parent">
<video id="foo" autoplay>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg" />
</video>
<video id="bar" autoplay>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg" />
</video>
</div>
In the latest FF, everything works fine. In Chrome however, neither of these videos will play; looking at the net tab reveals that they get stuck in 'pending' status for anywhere from a few seconds to infinity. If I comment out/remove a video element, the other will play.
I've seen multiple Chromium bug reports talking about similar issues, but none that seem to be directly related to a parent container. I've tried building the markup dynamically through JS with the same result. I've also tried adding codec attributes with no luck.
For the sake of argument, lets say restructuring the page so no videos live in the same parent isn't an option. Is this just an unfixable bug? Any possible workarounds, however hacky?
Upvotes: 1
Views: 2346
Reputation: 240
Solved - apparently making a request for the same filename from the same server at the same time freaks Google out. Changing filenames, or domains, works fine. FWIW, I duplicated the test vids and added 1, 2, 3, etc. to the end of the filenames and ran them from the same server. Works as expected. Using test videos from different domains got me on to the solution.
Upvotes: 5