背景：
在某些特殊情况下，会使用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的时候，会自动播放出来.
4028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
