小编Avi*_*era的帖子

我想在应用程序的两个区域显示相同的视频。因此，使用画布工作正常，但原始视频的质量下降，但画布视频质量很好。

var canvas = document.getElementById('shrinkVideo');
var context = canvas.getContext('2d');
var video = document.getElementById('mainVideo');

video.addEventListener('play', () => {
            // canvas.width = 270;
            // canvas.height = 480;
           this.draw(video, context, canvas.width,canvas.height);
        }, false);

   draw(v, c, w, h) {
        if (v.paused || v.ended) return false;
        c.drawImage(v, 0, 0, w, h);
        setTimeout(this.draw, 20, v, c, w, h);
    }

这是我同步两个视频的代码，它工作正常，但“mainVideo”质量下降。

但是，如果我删除所有画布代码并仅播放“mainVideo”，则质量可以保持，但使用画布其质量会下降。

预期结果这是未添加画布代码时视频的输出

实际结果这是添加画布代码后得到的输出

提前致谢