【NodeJS】html通过video和canvas同时播放视频

背景：

在某些特殊情况下，会使用Canvas作为容器展示视频，但是不是简单的为了播放视频，而是使用Canvas传递鼠标、键盘事件，发生了一个事件，事件则是传递到NodeJS服务器上，而做出相应的回复。本文只是做了一个例子，通过Canvas播放视频。

正文：

1、html页面：index.html

2、javascript:script.js

document.addEventListener('DOMContentLoaded', function() {
    var video = document.getElementById('video');
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    // 视频加载完成后，绑定事件监听器到视频的'playing'和'timeupdate'事件
    video.addEventListener('playing', function() {
        // 当视频开始播放时，绑定事件监听器到视频的'timeupdate'事件
        video.addEventListener('timeupdate', function() {
            // 在视频的每个帧可用时绘制到画布
            if (video.paused) return; // 如果视频暂停，则不绘制

            // 清除画布上的旧内容
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 绘制视频帧
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        });
    });
});

3、播放：

打开index.html的时候，会自动播放出来.