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

Check to see if the browser can play the video before you attempt to load it:

function canPlayVorbis() {
    var v = document.createElement('video');
    return !!(v.canPlayType && v.canPlayType('video/ogg; codecs="theora, vorbis"').replace(/no/, ''));
}

function canPlayMP4() {
    var v = document.createElement('video');
    return !!(v.canPlayType && v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
}

function canPlayWebM() {
    var v = document.createElement('video');
    return !!(v.canPlayType && v.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''));
}

Taken from Dive Into HTML5 Appendix A.

Answer 2

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.

Answer 3

automatically starts player on the ipad/iphone

        function fakeClick(fn) {
            var $a = $('<a href="#" id="fakeClick"></a>');
            $a.bind("click", function(e) {
                e.preventDefault();
                fn();
            });

            $("body").append($a);

            var evt,
 el = $("#fakeClick").get(0);

            if (document.createEvent) {
                evt = document.createEvent("MouseEvents");
                if (evt.initMouseEvent) {
                    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                    el.dispatchEvent(evt);
                }
            }

            $(el).remove();
        } 

$(function() { var video = $("#mobileVideo").get(0);

            fakeClick(function() {
                video.play();
            });

});