[iOS][JavaScript]動画を自動再生

iOSの仕様でweb上で動画を自動再生することはできない。

しかし、いくつかwebページに見てみると自動で再生されているケースがある。

で、全部が全部ではないが、下のようなやり方で再生している場合もあるようだ。

var video = document.createElement('video');
video.style.display = 'none';
document.body.appendChild(video);
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
var ctime = 0;
var lastTime;
var ua = navigator.userAgent;
if(/(iPhone|iPod)/.test(ua)) { // iPadもVideoはインライン再生可能である
    video.addEventListener('canplay',function(){
        lastTime = Date.now();
        setInterval(function(){
            var curTime = Date.now();
            var diff = Date.now() - lastTime;
            lastTime = curTime;
            ctime += diff/1000;
            video.currentTime = ctime;
            ctx.drawImage(video, 0, 0, 480, 360);
            if(video.duration <= video.currentTime){
                ctime = 0;
            }
        }, 1000/30);
    },false);
}else{
    video.addEventListener('canplay',function(){
        video.play();
        video.loop = true;
        setInterval(function(){
            ctx.drawImage(video, 0, 0, 480, 360);
        }, 1000/30);
    },false);
}
video.src = 'sample.mp4';
video.load();

これ、実際に試したら動いたのですが、注意点が必要で、chromeでユーザーエージェントをiOSに変更した場合は、動かない。

後、androidは動かないwww

参考
iPhone Safariで動画をインライン再生する方法