Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Android 4.2 video playback restrictions
<!doctype html>
<html>
<head>
<title></title>
<style>
button {
display: block;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<video id="video" src="http://video-js.zencoder.com/oceans-clip.mp4" width=300 height=150></video>
<button>Play!</button>
<script>
(function(){
var
video = document.getElementById('video'),
button = document.getElementById('button'),
togglePlay = function() {
if (video.paused) {
video.play();
} else {
video.pause();
}
};
// this doesn't work. Android ~4.2 seems to want some sort of user interaction
// before playing a video
setTimeout(function() { video.play(); }, 2000);
document.addEventListener('click', function(e){
// this works. Android lets you trigger playback after a single timeout,
// unlike iOS
setTimeout(togglePlay,1);
/*
// ... but there is a limit. After a second timeout, videos can't be
// programmatically triggered anymore
setTimeout(function(){
setTimeout(togglePlay,1);
},1);
*/
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment