web-dev-qa-db-ja.com

ファイル入力を介してビデオファイルからサムネイルを作成する

フォームinput type='file'のビデオファイル（mp4,3gp）からサムネイルプレビューを作成しようとしています。多くの人は、これはサーバー側でしかできないと言っています。 HTML5 CanvasとJavascriptを使ってFiddle.

Thumbnail Fiddle

唯一の問題は、これにはビデオが存在する必要があり、ユーザーがボタンをクリックしてサムネイルをキャプチャする前に再生をクリックする必要があるということです。プレーヤーが存在せず、ユーザーがボタンをクリックせずに同じ結果を得る方法があるかどうか疑問に思っています。例：ユーザーがファイルのアップロードをクリックし、ビデオファイルを選択すると、サムネイルが生成されます。どんな助け/考えでも大歓迎です！

javascripthtml5videothumbnailsvideo-thumbnails
32
ryan

Canvas.drawImageはhtmlコンテンツに基づいている必要があります。

ソース

こちらはシンプルなjsfiddleです

//and code
function capture(){
    var canvas = document.getElementById('canvas');
    var video = document.getElementById('video');
    canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
}

このソリューションの利点は、ビデオの時間に基づいて必要なサムネイルを選択できることです。

60
Giu

最近これが必要になり、かなりのテストを行い、最低限まで煮詰めました。 https://codepen.io/aertmann/pen/mAVaPx を参照してください。

動作にはいくつかの制限がありますが、現時点ではかなり優れたブラウザーサポートがあります：Chrome、Firefox、Safari、Opera、IE10、IE11、Android（Chrome）、iOS Safari（10+）。

 video.preload = 'metadata';
 video.src = url;
 // Load video in Safari / IE11
 video.muted = true;
 video.playsInline = true;
 video.play();
14
Aske Ertmann