I have a page with 3-5 videos in a slide show. Only a single slide is visible at a time and the slideshow can be navigated by clicking on left/right arrows. For the iPad I'm using the video tag to add the videos as so:
<video controls="controls" width="930" height="556" src="{url}" ></video>
This works fine for at least 1 video in the slideshow on pageload (usually the last one) but the other videos display only as a black box without the play button. Clicking the left and right buttons of the slide show several times makes some of the video controls appear and then the video plays fine. But on page load most of the video boxes stay black.
I've tested all videos on a page with only a single video tag and they play correctly so it's not an encoding issue. The issue happens on both iPad 1(ios 4.2) and iPad 2(ios 5)
found the solution:
the problem only happened when all video players were visible on page load.
I changed the css of the video tag to display:none; by default and fade in the players using the setTimeout() function with a timeout of 1000.
hope that helps somebody out there