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

背景:

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

正文:

1、html页面:index.html

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

javascript 复制代码
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的时候,会自动播放出来.

相关推荐
jojo是只猫4 分钟前
前端vue对接海康摄像头流程
前端·javascript·vue.js
10年前端老司机4 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程8 小时前
2025前端面试题
前端·面试
前端小趴菜059 小时前
React - createPortal
前端·vue.js·react.js
晓131310 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo10 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴11 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
王者鳜錸11 小时前
使用Selenium自动化获取抖音创作者平台视频数据
selenium·自动化·音视频
chao_78912 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
却道天凉_好个秋12 小时前
音视频学习(三十七):pts和dts
音视频·pts·dts