57

フォームのビデオ ファイル (mp4,3gp) からサムネイル プレビューを作成しようとしていますinput type='file'。多くの人が、これはサーバー側でのみ実行できると言っています。最近、HTML5 Canvas と Javascript を使用してこの Fiddle に出くわしたので、これは信じがたいことです。

サムネイルフィドル

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

4

6 に答える 6

77

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);
}

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

于 2015-04-22T18:53:33.513 に答える
0

jQuery Lib を使用すると、ここで私のコードを使用できます。$video は Video 要素です。この関数は文字列を返します

function createPoster($video) {
    //here you can set anytime you want
    $video.currentTime = 5;
    var canvas = document.createElement("canvas");
    canvas.width = 350;
    canvas.height = 200;
    canvas.getContext("2d").drawImage($video, 0, 0, canvas.width, canvas.height);
    return canvas.toDataURL("image/jpeg");;
}

使用例:

$video.setAttribute("poster", createPoster($video));
于 2020-09-15T13:29:33.347 に答える