##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でもイケます
##音声は？
書いた