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>

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

前の記事

疑似クラス:nth-child()