使用视频循环绘制画布

Draw Canvas with video loop

本文关键字：绘制 循环 视频      更新时间：2023-09-26

我循环浏览HTML视频的一部分，同时用视频的当前帧绘制画布。当视频重新开始时，画布上总是有一个灰色框架。如果循环区域很长，这不是什么大问题，但根据我的需要，这些区域可能是0.5秒，如果你一次又一次地循环，画布就会开始闪烁。

在绘制画布时，我还尝试了不同的视频属性（end、loop、networkState、readyState）-对没有帮助

我提供了一个小提琴来向你展示我的问题。（只需按播放视频）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);
    }
}

它闪烁的原因是，当您将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);
}
相关文章：