软件项目技术点(10)——将视频video绘制到canvas

AxeSlide软件项目梳理   canvas绘图系列知识点整理

可参考 绘制图片

现在我们绘制视频同样使用drawImage

this.context.drawImage(videoElement, x, y, width, height);

因为视频播放时连续不同的画面，需要用到帧循环去不断绘制。这里可以用requestAnimationFrame

html内容如下：

<canvas id="canvas1" width="500" height="500"></canvas>
<video id="video1" controls="" src="https://blz-videos.nosdn.127.net/1/OverWatch/OVR_D.VA_SHOOTING_STAR_zhCN_YT_PC_3.mp4" type="video/mp4">浏览器不支持</video>

JS代码如下：

var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");

var video = document.getElementById("video1");
//订阅视频可播放事件
video.oncanplay = function() {
    video.play();
    switchToCanvas();
}

function switchToCanvas() {
    if (video.ended) {
        return;
    }
    // 将video上的图片的每一帧以图片的形式绘制的canvas上
    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    window.requestAnimationFrame(switchToCanvas);
}