iPhone Safariで動画をインライン再生する方法 #JavaScript

iPhone SafariのVideoタグの制限

iPhone SafariのVideoタグには大きく2つ制限がある。

ユーザインタラクション（タップ）なしに再生できない
初期再生時必ずフルスクリーン再生になる

特に2がクセモノで、これのせいでモバイルブラウザに動画広告はほぼ無いし、モバイルブラウザゲームには動画演出がない（MotionJPEGみたいにjpegを数百枚数千枚差し替えるとか涙ぐましいことをしている例はある）。

制限は超えられる

この制限が超えられないものかと調べてみると、やはり同じようなことを訊いている人が居た。

inline html5 video on iphone - Stack Overflow
http://stackoverflow.com/questions/30855662/inline-html5-video-on-iphone

で、そのベストアンサーが

It's very rough, but the basic gist is that you "seek" through the video instead of playing it outright. So instead of calling:
video.play()

You instead set a loop using request animation frame or setInterval, then set the:
video.currentTime = __FRAME_RATE__

つまり、

Playすんな、currentTimeを動かせ！

Sample Code

ループ再生

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

DEMO

http://jsrun.it/hadakadenkyu/iFDV

One more thing

WebGLでもイケます

音声は？

書いた