HTML5 video on iPad

Question

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();
});

Answer 1

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.