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.

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

Realize this is an old issue, but if anyone else stumbles across this, I encountered a similar problem.

Looking at the events dispatched by the video element, it looks like the iPad will start loading the video, then almost immediately suspend it (appears to be simultaneous with the first 'progress' event).

It will not fire the "canplay" or "canplaythrough" events until after playback has actually begun, so you must listen to one of the 3 events that do fire before playback begins:

• loadstart
• progress
• suspend

I would change your handler to 'loadstart' and give that a shot.

Answer 4

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 5

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

Answer 6

the problem seems to be dynamically creating the video object - that somehow breaks the code on the iPad. I wrote a video player that moves the alreay present video element into an container and immediately the video stops working. no problem on other systems though... guess you gotta find a way to have the video element already in place and then add all your other code above and below it....

Answer 7

Here's a GREAT place to get familiar with HTML5 events.

http://www.w3.org/2010/05/video/mediaevents.html

Answer 8

This is possibly why your MP4 video won't play until it's fully loaded: how to get your HTML5 MP4 video to play before being fully loaded. Worth a shot anyway.