Created
March 29, 2011 06:21
-
-
Save millermedeiros/891886 to your computer and use it in GitHub Desktop.
iPad HTML5 video quirks and hacks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Example how to preload HTML5 video on the iPad (iOS 3.2+) | |
* @author Miller Medeiros | |
* Released under WTFPL | |
*/ | |
var vid = document.createElement('video'); | |
vid.src = 'lol_catz.mp4'; | |
document.getElementById('video-holder').appendChild(vid); | |
//this function should be called on a click event handler otherwise video won't start loading | |
function initVideo(){ | |
vid.play(); //start loading, didn't used `vid.load()` since it causes problems with the `ended` event | |
if(vid.readyState !== 4){ //HAVE_ENOUGH_DATA | |
vid.addEventListener('canplaythrough', onCanPlay, false); | |
vid.addEventListener('load', onCanPlay, false); //add load event as well to avoid errors, sometimes 'canplaythrough' won't dispatch. | |
setTimeout(function(){ | |
vid.pause(); //block play so it buffers before playing | |
}, 1); //it needs to be after a delay otherwise it doesn't work properly. | |
}else{ | |
//video is ready | |
} | |
} | |
function onCanPlay(){ | |
vid.removeEventListener('canplaythrough', onCanPlay, false); | |
vid.removeEventListener('load', onCanPlay, false); | |
//video is ready | |
vid.play(); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Restart video on iPad iOS 3.2+ | |
* @author Miller Medeiros | |
* Released under WTFPL | |
*/ | |
function restartVideo(){ | |
vid.currentTime = 0.1; //setting to zero breaks iOS 3.2, the value won't update, values smaller than 0.1 was causing bug as well. | |
vid.play(); | |
} | |
//loop video | |
vid.addEventListener('ended', restartVideo, false); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Enforce a specific amount of decimal digits | |
* @author Miller Medeiros | |
* Released under WTFPL | |
*/ | |
function enforcePrecision(n, nDecimalDigits){ | |
return +(n).toFixed(nDecimalDigits); | |
} | |
//seek to random position but limiting (and enforcing) the number of decimal digits to 1 to avoid iOS bug | |
vid.currentTime = enforcePrecision(Math.random() * vid.duration, 1); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you so much!