When building a gallery of videos on a page, the HTML5 video element can be a pretty easy way to go. You can control the src, dynamically switching it out or setting it. You can control when the video loads and plays (for the most part). But a bug I’ve seen recently is that the iPad will act not-so-nice when you try to place multiple
<video tags on the page.
I tried the video elements with no properties, just data-attributes, and with full properties. No luck. Apparently the bug itself is due to having multiple video elements on the page. So, the fix? Instead, I place an image on the page (where the video should go), give it a data-src attribute of the source of the video file, and then when it comes time for that video to play, I simply create a video element on the fly (destroying the old one first), add the src from the image’s data-src attribute, and then hide the image. It seems to work, as hacky as it may be.
Hope that helps!