【NodeJS】mp4通过Canvas进行播放

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

疯癫的老码农

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

阅读量1.5k

点赞数 10

分类专栏： NodeJS 前端框架文章标签： html5 javascript

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

版权

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

8 篇文章 0 订阅

订阅专栏

NodeJS

6 篇文章 0 订阅

订阅专栏

本文介绍如何在HTML中使用Canvas容器来显示视频，通过Canvas捕获鼠标和键盘事件，并将这些事件传递到NodeJS服务器进行处理。实例展示了如何创建虚拟video元素，解决自动播放问题，并使用requestAnimationFrame绘制视频帧。

摘要由CSDN通过智能技术生成

背景：

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

正文：

1、html页面：index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=`, initial-scale=1.0">
    <title>canvas实现视频播放</title>
</head>
<body>
  <canvas id="canvas" width="640px" height="360px"></canvas>

  <script src="./index.js"></script>  
</body>
</html>

2、javascript:index.js

window.onload = () => {
  
  // 创建一个虚拟video元素
  const videoEl = document.createElement("video");
  videoEl.src = "XXX.mp4";

  // 重要：由于浏览器限制自动播放问题，则需要使用无声播放即可实现自动播放
  videoEl.muted = "muted"; 
  videoEl.autoplay = "autoplay";
  videoEl.loop = "loop";
  videoEl.play();


  // 创建canvas
  const canvas = document.getElementById("canvas");
  const cvsWidth = canvas.width;
  const cvsHeight = canvas.height;
  const ctx = canvas.getContext("2d");

  // 使用requestAnimationFrame定时器实现canvas绘制video每一帧
  const videoRender = () => {
    window.requestAnimationFrame(videoRender);
    ctx.clearRect(0, 0, cvsWidth, cvsHeight);
    ctx.drawImage(videoEl, 0, 0, cvsWidth, cvsHeight);
  };
  videoRender();
  
};

3、播放：

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