Load more than one video on a webpage using the iOS platform

Question

I have a webpage with four VIDEO elements. I know that they elements won't even start loading any metadata until I explicitly trigger a touch event on them. Can I hook up an event handling function on the touch event on, say, a BUTTON element such that the "play" methods on all four VIDEO elements are invoked?

I mean something along these lines:

$b1.bind("touchstart", function (e) {
    $v1.get(0).play();
    $v1.get(0).pause();
    $v2.get(0).play();
    $v2.get(0).pause();
    $v3.get(0).play();
    $v3.get(0).pause();
    $v4.get(0).play();
    $v4.get(0).pause();
});

When I try this four separate QuickTime windows are opened with fullscreen videos. That's not the effect I want, but at least I can hook all four to the handler. The problem, though, is that only $v4 actually starts loading anything, and the other three apparently never start loading.

Answer 1

you cannot start multiple videos at once. Every time you start a video on iOS, the currently running video will be stopped. This is a performance restriction on all mobile apple devices. For the same reason the preload attribute has no relevance on current iOS devices.

I'm guessing you want the videos to be inline? then add webkit-playsinline as an attribute to each <video> element:

<video src="myvideo.mp4" webkit-playsinline controls>

that way you can arrange the 4 video-elements next to each other AND use native video-controls (eg to allow switching to native fullscreen later). If you want to implement your own controls leave out the controls attribute.

PS: following up on 0x60's link, you can find a section called iOS-Specific Considerations

Answer 2

Have you checked this out? Set your code to: <video preload="automatic" /> and it should preload.