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

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

疯癫的老码农

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

阅读量807

点赞数 9

分类专栏：前端框架 NodeJS 音视频文章标签： html 音视频前端

本文链接：https://blog.csdn.net/HWTwilight/article/details/135597592

版权

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

8 篇文章 0 订阅

订阅专栏

NodeJS

6 篇文章 0 订阅

订阅专栏

音视频

5 篇文章 0 订阅

订阅专栏

背景：

在某些特殊情况下，会使用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的时候，会自动播放出来.