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

最新推荐文章于 2024-09-29 10:59:53 发布

原创最新推荐文章于 2024-09-29 10:59:53 发布 · 1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#html #音视频 #前端

前端框架同时被 3 个专栏收录

9 篇文章

订阅专栏

NodeJS

6 篇文章

订阅专栏

音视频

5 篇文章

订阅专栏

本文介绍如何使用Canvas在HTML页面中不仅播放视频，还实现鼠标和键盘事件的传递，通过时间更新事件将视频帧实时绘制到Canvas上，并通过NodeJS服务器处理这些事件。

背景：

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

正文：

1、html页面：index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Video to Canvas Render</title>
</head>
<body>
    <video id="video" width="640" height="360" controls>
        <source src="video1.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <canvas id="canvas" width="640" height="360"></canvas>
    <script src="script.js"></script>
</body>
</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的时候，会自动播放出来.