Проблемы с масштабированием HTML 5 Video to Canvas

Я пытаюсь захватить кадр видео 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: я пробовал несколько форматов/видео и операционных систем, и у меня все еще есть одна и та же проблема, поэтому я не верю, что проблема связана, например, с какой-либо проблемой кодека.


javascript jquery html5-canvas html5-video
person Tristan    schedule 07.09.2013    source источник

Ответы (1)


arrow_upward
10
arrow_downward

Хорошо, я не знаю, почему это имеет какое-либо значение для элемента холста, но для этого мне пришлось установить ширину и высоту холста, используя его атрибуты ширины/высоты, а затем я мог изменить размер холста, как мне заблагорассудится. и видео заполнит всю область холста. Полное решение ниже:

$(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";

});

person Tristan    schedule 07.09.2013
comment
вы можете посмотреть здесь, пожалуйста, stackoverflow.com/ вопросы/33239288/ - person VB_; 20.10.2015