Q:

HTML5 video on iPad

I have a dynamic video gallery and it works great on a computer.  When moving to an iPad, the video starts loading and it shows the cannot play icon.  Instead of this I'd rather the video not show until it's ready to play.  I have tried to add events listeners for "canplaythrough" and "canplay" and when they occur for the video to fade in then play.  Does the iPad not support these events?
new_video = document.createElement('video');
new_video.setAttribute('class', 'none');
new_video.setAttribute('width', '568');
new_video.setAttribute('height', '269');
new_video.setAttribute('id', 'video'+video_num);
current_video.insertBefore(new_video, video_controls);
new_video.load();
new_video.addEventListener('canplaythrough', function() {
     $('#video'+video_num').fadeIn(100);
     new_video.play();
});

A:

The way to solve this visual problem is to hide the video element until it is ready to be played. Note that you cannot set display:none (video won't load if you do that) and visibility:hidden won't solve the issue either.
To fix it, wrap the video element on a DIV with overflow:hidden and set -webkit-transform:translateX(1024px) (a number high enough to push the video outside the screen).
Than you have to listen for the canplay or canplaythrough or load events (based on your need) and set the translateX to zero after that.

A:

On the iPad it will not load the video until a user starts an event this is by design of apple to prevent iPhone or iPad users from burning up their data plans. So you will not be able to do what you want sorry.
Check out this link and look for the Device-Specific Considerations section for some info. But it will not start loading data so it couldn't fire the canplaythrough event until a user touches it.

