Question

在画布上保存大型视频文件的屏幕截图时，似乎无法获取其blob。当视频blob已显示在容器上时，它正常工作。

$('#txtFileUpload').on('change', function() {
    var countFiles = $(this)[0].files.length;
    for (var ctr = 0; ctr < countFiles; ctr++) {
        var reader = new FileReader();

        readerOnLoad(reader, ctr, $(this)[0], this.files[0]);
    }
});

var readerOnLoad = function(reader, ctr, fileInput, files) {
    reader.onloadend = (function(ctr) {
        return function(e, ctr) {
            var videoIdClass = 'thumb-video-' + ctr;
            var $video = $('<video />', {
                'src': e.target.result,
                'id': videoIdClass,
                'class': videoIdClass,
            }).appendTo($('.video-container')).wrap('<div class="thumb-container"></div>');
            setVideoCapture($video);
        };
    })(ctr);

    reader.readAsDataURL(fileInput.files[ctr]);
}

var setVideoCapture = function(videoElement) {
    var $output;
    var $canvas = document.createElement('canvas');
    var $img = document.createElement('img');

    $output = $('#output');
    $video = videoElement.get(0);

    $canvas.width = $video.videoWidth * 2;
    $canvas.height = $video.videoHeight * 2;
    $canvas.getContext('2d').drawImage($video, 0, 0, $canvas.width, $canvas.height);

    $img.src = $canvas.toDataURL();
    $output.prepend($img);
}

快速修复将在setVideoCapture方法上设置超时，如下所示：

这很有效。

var setVideoCapture = function(videoElement) {
    setTimeout(function() {
        var $output;
        var $canvas = document.createElement('canvas');
        var $img = document.createElement('img');

        $output = $('#output');
        $video = videoElement.get(0);

        $canvas.width = $video.videoWidth * 2;
        $canvas.height = $video.videoHeight * 2;
        $canvas.getContext('2d').drawImage($video, 0, 0, $canvas.width, $canvas.height);

        $img.src = $canvas.toDataURL();
        $output.prepend($img);
    }, 2000, videoElement)
}

很奇怪它必须在setVideoCapture方法中，而不是在触发setVideoCapture方法时：

这不起作用。

reader.onloadend = (function(ctr) {
    return function(e, ctr) {
        var videoIdClass = 'thumb-video-' + ctr;
        var $video = $('<video />', {
            'src': e.target.result,
            'id': videoIdClass,
            'class': videoIdClass,
        }).appendTo($('.video-container')).wrap('<div class="thumb-container"></div>');
        setTimeout(setVideoCapture($video), 3000, $video);
    };
})(ctr);

但当然使用setTimeout不是推荐的修复方法。应该是setVideoCapture方法只有在$video元素已经被添加并显示在容器上时才会被触发。

Answer 1

没关系，我能够解决这个问题：

$video.addEventListener('loadeddata', function() {
   // do something here
}, false);

抓取附加blob视频的屏幕截图

1 个答案: