

mp4ファイルからphpやjsで画像を抽出する方法はありますでしょうか？  
また、htmlの工夫でサムネイル的なものを出すことは出来ませんでしょうか。

詳しい方、ご教示頂けますと、幸いです。


CC BY-SA 3.0
2016-04-18T12:50:42.453
24120
2016-04-19T09:22:56.563
8619
question
javascript php html
mp4から画像を抽出する


使途等不明ですので性能などについては検証・言及しません。また環境も不明ですので最新の環境を想定します。

最近のほとんどの主要なブラウザはHTML5のvideo要素でmp4が再生可能ですので、  
jsを利用できるということでしたらこのvideo要素で描画された画面をcanvas要素（videoでmp4がつかえる程度の環境ならまずサポートしているでしょう）に画像としてエクスポート可能ですし、必要ならさらにAPIがサポートする範囲で（あるいは必要なライブラリを使用して）任意の画像形式に変換することも可能と思います。  
サンプルではシークバーで動画の位置を選択して、その瞬間の画面をcanvasに表示しています。

[code]

    thumbnailView.getContext('2d').drawImage(videoRenderer, 0, 0, videoRenderer.videoWidth, videoRenderer.videoHeight);
    
[/code]

がその処理です。（HTML5のvideoで読める）てきとうな動画ファイルをご用意の上お試しください。

> また、htmlの工夫でサムネイル的なものを出すことは出来ませんでしょうか。

こちらの意図がよくわからなかったのですが、とりあえずcanvasからエクスポートしたdata urlのjpeg画像を表示できるようにしてみました。

[code]

    var selectFile = document.querySelector('#sourceInputFile');
    var videoRenderer = document.createElement('video');
    var seek = document.querySelector('#seekInputRange');
    var exportJpeg = document.querySelector('#exportJpegInputButton');
    
    var videoRendererLoaded = false;
    videoRenderer.addEventListener('loadedmetadata', function () {
      videoRendererLoaded = true;
      thumbnailView.width = videoRenderer.videoWidth;
      thumbnailView.height = videoRenderer.videoHeight;
    });
    
    videoRenderer.addEventListener('seeked', function () {
      thumbnailView.getContext('2d').drawImage(videoRenderer, 0, 0);
    });
    
    selectFile.addEventListener('change', function (e) {
      var file = selectFile.files[0];
      if (file && videoRenderer.canPlayType(file.type)) {
        videoRendererLoaded = false;
        seek.value = 0;
        videoRenderer.src = (URL || webkitURL).createObjectURL(selectFile.files[0]);
      }
    });
    
    seek.addEventListener('input', function () {
      if (videoRendererLoaded) {
        videoRenderer.currentTime = seek.value * videoRenderer.duration;
      }
    });
    
    exportJpeg.addEventListener('click', function () {
      if (videoRendererLoaded) {
        var img = new Image();
        img.src = thumbnailView.toDataURL('image/jpeg');
        document.body.appendChild(img);
      };
    });
[/code]

[code]

    source video file: <input id="sourceInputFile" type="file" />
    <br />
    seek position: <input id="seekInputRange" type="range" min="0" max="1" step="0.001" />
    <br />
    thumbnail:
    <br />
    <canvas id="thumbnailView"></canvas>
    <br />
    <input id="exportJpegInputButton" type="button" value="Export thumbnail as JPEG image" />
[/code]

参考

  * <https://stackoverflow.com/questions/23640869/create-thumbnail-from-video-file-via-file-input>
  * 動画がなければ[NHKクリエイティブ・ライブラリー](http://www1.nhk.or.jp/creative/)など


CC BY-SA 3.0
2016-04-19T08:06:09.477
24152
2016-04-19T09:22:56.563
2017-05-23T12:38:56.083
-1
24120
answer