5

サムネイルを作成するために html5 ビデオのフレームをキャプチャしようとしていますが、画像をキャンバスにレンダリングすると奇妙な結果が表示されます。

私が見ているのは、キャンバスに表示されている画像が、かなり拡大されたビデオの一部に過ぎないということです! 下の画像に示すように：

キャンバスの縮尺が間違っている

また、コードも信じられないほど単純です。

$(document).ready(function(){
    var $Body = $("body");

    var $Video = $("<video>").appendTo($Body);
    var cVideo = $Video.get(0);

    cVideo.addEventListener("loadedmetadata", function(){
        cVideo.addEventListener("seeked", function(){
            var $Canvas = $("<canvas>").width(cVideo.videoWidth).height(cVideo.videoHeight);
            $Canvas.appendTo($Body);
            var cCtx = $Canvas.get(0).getContext("2d");
            cCtx.drawImage(cVideo, 0, 0);
        }, false);
        cVideo.currentTime = 500;
    }, false);
    cVideo.src = "movie.mkv";
});

幅/高さ/クリッピング領域などの多くの組み合わせを試しましたが、達成できるのは、元のビデオの右上隅だけを見るさまざまなバージョンだけです。

編集:元のビデオのサイズは 1920 x 800 であり、提供された画像ではビデオ タグとキャンバス タグの両方のサイズであることをお知らせします。サイズも色々試してみましたが同じ結果でした

Edit2:複数のフォーマット/ビデオと OS を試しましたが、まだ同じ問題があるため、問題がコーデックの問題に関連しているとは思えません。

4

1 に答える 1

11

これがキャンバス要素に違いをもたらす理由はわかりませんが、これを機能させるには、幅/高さ属性を使用してキャンバスの幅と高さを設定する必要があり、キャンバスのサイズを好きなように変更できましたビデオはキャンバスの領域を埋めます。以下の完全なソリューション：

$(document).ready(function(){
var $Body = $("body");

var $Video = $("<video>").appendTo($Body);
var cVideo = $Video.get(0);

cVideo.addEventListener("loadedmetadata", function(){
    cVideo.addEventListener("seeked", function(){
        var $Canvas = $("<canvas>").attr("width", cVideo.videoWidth).attr("height", cVideo.videoHeight);
        $Canvas.appendTo($Body);
        var cCtx = $Canvas.get(0).getContext("2d");
        cCtx.drawImage(cVideo, 0, 0, cVideo.videoWidth, cVideo.videoHeight);
    }, false);
    cVideo.currentTime = 500;
}, false);
cVideo.src = "movie.mkv";

});

于 2013-09-07T19:32:35.503 に答える