2016/09/14
iPhoneでもインラインでVideo再生する方法
iPhoneでは基本的に、WEBページの中で、インラインで動画を再生させることはできません。
動画を再生させようとすると、強制的にフルスクリーンで再生されます。
しかし、
iPhone Safariで動画をインライン再生する方法 – Qiita
↑こちらのサイトで、インラインで動画を再生させる方法が紹介されていましたので、
実際にやってみました。
↓作ってみたもの
DEMO
方法
仕組みは、
iPhoneでvideoがフルスクリーン表示がされるのは、
playというイベントが発生した時なので、
videoの時間だけを操作して、
その動画の映像をCanvasに表示することで、
実現できています。
|
1 | <canvas id="videoView" width="320" height="240"></canvas> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | var video = document.createElement('video'); video.style.display = 'none'; document.body.appendChild(video); var canvas = document.getElementById('videoView'), ctx = canvas.getContext("2d"), ctime = 0, lastTime, ua = navigator.userAgent, canvasWidth = 480, canvasHeight = 360; //iPhone, iPodの場合 if(/(iPhone|iPod)/.test(ua)) { video.addEventListener('canplay',function(){ lastTime = Date.now(); //再生開始時の時間を取得 setInterval(function(){ var curTime = Date.now(), //再生時の時間を取得 diff = Date.now() - lastTime; //前フレームからの経過時間を取得 lastTime = curTime; //現フレームの時間を保存 ctime += diff/1000; //currentTimeに経過時間を加算 video.currentTime = ctime; //videoのcurrentTimeを更新 //videoのサイズが変更されたら、canvasのサイズをvideoのサイズに合わせる if(canvasWidth != video.videoWidth) { canvasWidth = video.videoWidth; canvas.width = canvasWidth; } if(canvasHeight != video.videoHeight) { canvasHeight = video.videoHeight; canvas.height = canvasHeight; }; //videoをcanvasに描画 ctx.drawImage(video, 0, 0, canvasWidth, canvasHeight); //videoの最後に来たら、currentTimeを最初に戻す if(video.duration <= video.currentTime){ ctime = 0; } }, 1000/30); },false); //iPhone, iPod以外の場合 }else{ video.addEventListener('canplay',function(){ video.play(); //再生開始 video.loop = true; //ループさせる setInterval(function(){ if(canvasWidth != video.videoWidth) { canvasWidth = video.videoWidth; canvas.width = canvasWidth; } if(canvasHeight != video.videoHeight) { canvasHeight = video.videoHeight; canvas.height = canvasHeight; }; ctx.drawImage(video, 0, 0, canvasWidth, canvasHeight); }, 1000/30); },false); } video.src = 'movie.mp4'; video.load(); |
ただ、動画によってはブラウザに負担がかかってしまうようで、
私がDEMOで使った動画では、途中で止まってしまいました。
動画によっては問題が起こらないので、
動画のファイルのエンコード方法などを調整することで、その問題は解決できそうです。
Author Profile
SHARE
