PHPでffmpegを使わずに動画ファイルのサムネイルを作成する
簡単な画像データベースを作ったときのことです。
データベースの仕様は、
PHP+Mysqlで作成する。
画像・動画ファイルがサーバにアップできる。
カテゴリー別に分けることができて、ファイル名やタグ情報で検索ができる。
iPhoneで撮影したビデオをアップロードしてサムネイルでリスト表示させようとしたのですが、
レンタルサーバなのでffmpegがインストールできないため、
html5のcanvas機能を使いサムネイル画像を表示させて、
JavaScriptでサーバにアップロードしました。
<video id="vid" controls autoplay>
<source src="".$imagename."">
</video></br>
Canvas:<span id="image_file_name"></span></br>
<canvas id="mycanvas"></canvas></br>
<script>
var image_file_name = document.getElementById('image_file_name');
var v = document.getElementById('vid');
var canvas = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
v.addEventListener('play', function() {
var orgW = v.videoWidth;
var orgH = v.videoHeight;
var orgR = orgH / orgW;
if(orgW>200){
orgW=200;
orgH=200 * orgR;
}
canvas.width=orgW; canvas.height=orgH;
image_file_name.innerHTML="横"+orgW+"×縦"+orgH;
ctx.drawImage(v,0,0,orgW,orgH);
uploadbase64();
}, false);
function uploadbase64(){
canvasData = canvas.toDataURL("image/jpeg");
var ajax = new XMLHttpRequest();
ajax.open("POST",'imgupload.php?filename=".$filename."',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(canvasData)
}
</script>