Question

我遍历HTML视频的一部分，同时使用当前视频帧绘制Canvas。当视频重新开始时，画布上始终有1个灰色框。如果循环区域很长，它不是一个大问题，但对于我的需要，这些区域可能是0.5秒，然后如果你一遍又一遍地循环，画布开始闪烁。

绘制画布时，我也尝试了不同的视频属性（结束，循环，networkState，readyState） - 没有帮助

我提供了一个jsfiddle来向你展示我的问题。（只需按视频播放） https://jsfiddle.net/Lz17fnf3/2/

$('#v').on('timeupdate', function () {

    if ($('#v')[0].currentTime > 2) {//Loop for one second
        $('#v')[0].currentTime = 1;
    }

    var $this = $('#v')[0]; //cache
    (function loop() {
        if (!$this.paused && !$this.ended) {
            drawCanvas();
            setTimeout(loop, 1000 / 25); // drawing at 25fps
        }
    })();
});


function drawCanvas() {
    var elem = document.getElementById('c');
    var c = elem.getContext('2d');
    var v = $('#v')[0];
    $('#c').attr('width', v.videoWidth);
    $('#c').attr('height', v.videoHeight);
    if (v.readyState == 4) {
        c.drawImage(v, 0, 0, v.videoWidth, v.videoHeight, 0, 0, v.videoWidth, v.videoHeight);
    }
}

Answer 1

它闪烁的原因是因为当您将width或height分配给画布元素时，此操作会重置画布的整个上下文，这很可能导致空白帧。尝试将所有画布/上下文定义移到drawCanvas之外。

类似的东西：

var elem = document.getElementById('c');
var c = elem.getContext('2d');
var v = $('#v')[0];

// In order to set the canvas width & height, we need to wait for the video to load.
function init() {
    if (v.readyState == 4) {
        $('#c').attr('width', v.videoWidth);
        $('#c').attr('height', v.videoHeight);
    } else {
        requestAnimationFrame(init);
    }
}

init();

$('#v').on('timeupdate', function () {
    if ($('#v')[0].currentTime > 2) { //Loop for one second
        $('#v')[0].currentTime = 1;
    }

    var $this = $('#v')[0]; //cache
    (function loop() {
        if (!$this.paused && !$this.ended) {
            drawCanvas();
            setTimeout(loop, 1000 / 25); // drawing at 25fps
        }
    })();
});

function drawCanvas() {
    c.drawImage(v, 0, 0, v.videoWidth, v.videoHeight, 0, 0, v.videoWidth, v.videoHeight);
}

使用视频循环绘制画布

1 个答案: