【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的时候,会自动播放出来.

相关推荐
会豪27 分钟前
Electron-Vite (一)快速构建桌面应用
前端
中微子29 分钟前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶30 分钟前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子32 分钟前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_1 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23331 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin1 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_2 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit2 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言
龙在天2 小时前
ts中的函数重载
前端