iPhoneでビデオプレーヤーを立ち上げること無く、Safari内でムービーが流れているようにみせる

iPhoneでvideoタグのplayを叩くと、ビデオプレイヤーが立ち上がってしまいますがそのままブラウザ内で見たいというケースもあると思います。
そんなときにつかえるようなつかえないような技を紹介します。（iOS9.0.2 の iPhone6 では動きました）

用意するもの

1. 再生したいムービー（mp4など）
2. 再生したいムービーの音だけ切り出したもの（mp3など）

※ 音とムービーが同じ長さであることを前提としています
※ どちらもiOSで再生できるコーデックで書き出してください

方針

1. canvas、video、audioを用意
2. videoのsrcにmp4パスをいれる
3. audioでmp3を再生
4. audioのcurrentTimeを取得
5. videoのcurrentTimeをaudioのcurrentTimeにあわせる（playはしない）
6. canvasにvideoをレンダリング
7. audioの再生が終わるまで 4 ~ 6 を繰り返す

DEMO

http://jsrun.it/kimmy/onVC
※ iPhoneでご確認ください

JavaScript

(function(win, doc) {

    "use strict";
    
    if (!/iphone|ipod|ipad/.test(navigator.userAgent.toLowerCase())) {
        return;
    }
    
    var btn     = doc.getElementById("btn"),
        audio   = doc.createElement("audio"),
        video   = doc.createElement("video"),
        canvas  = doc.getElementById("canvas"),
        ctx     = canvas.getContext("2d"),
        isReady = false;

    audio.addEventListener("canplay", function() {
        if (isReady) {
            drawStart();
        } else {
            isReady = true;
        }
    }, false);
    
    audio.src = "http://jsrun.it/assets/u/q/x/T/uqxTi.mp3";
    
    video.addEventListener("canplay", function() {
        if (isReady) {
            drawStart();
        } else {
            isReady = true;
        }
    }, false);
    
    video.src = "http://kimizuka.github.io/movie/surprise.mp4";  
    
    btn.addEventListener("click", function() {
        audio.load();
        video.load();
    }, false);
    
    function drawStart() {
        var duration = video.duration;
        
        video.currentTime = 0;
        audio.play();
        
        requestAnimationFrame(function draw() {
            ctx.drawImage(video, 0, 0);
            
            if (audio.currentTime < duration) {
                video.currentTime = audio.currentTime;
                requestAnimationFrame(draw);
            } else {
                video.currentTime = duration;
            }
        });        
    }
    
})(this, document);

html

<canvas id="canvas" width="320" height="180"></canvas>

<div id="btn" class="btn red adjust">
  <div class=hole>
    <div class="inner">PLAY</div>
  </div>
</div>

以外とさくさく動きました。