在画布HTML5上绘制视频
[英]Draw video on canvas HTML5
问题描述
我正在尝试在画布上绘制视频。 为此，我捕获了Javascript中的onMouseDown和onMouseUp事件，以获取每个事件的x和y坐标（我需要在画布内设置视频的位置，宽度和高度）。
因此，每次我在画布上绘制视频时，都应该停止创建的视频，然后播放新的视频。 两个问题：
1）视频不播放（该功能仅绘制第一帧），但音频播放
2）如何停止先前绘制的视频？
演示： http ： //jsfiddle.net/e3c3kore/
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
var canvas, context, xStart, yStart, xEnd, yEnd;
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.addEventListener("mousedown", mouseDown);
canvas.addEventListener("mouseup", mouseUp);
function mouseDown(e) {
xStart = e.offsetX;
yStart = e.offsetY;
}
function mouseUp(e) {
xEnd = e.offsetX;
yEnd = e.offsetY;
if (xStart != xEnd && yStart != yEnd) {
var video = document.createElement("video");
video.src = "http://techslides.com/demos/sample-videos/small.mp4";
video.addEventListener('loadeddata', function() {
video.play();
context.drawImage(video, xStart, yStart, xEnd-xStart, yEnd-yStart);
});
}
}
演示： http ： //jsfiddle.net/e3c3kore/
3 个解决方案
解决方案1
3 已采纳 2015-11-20 20:51:40
1）drawImage（）方法仅被调用一次。 每帧需要调用一次。
2）调用pause（）方法停止视频。
例如，以下代码在鼠标向上滑动时启动一个计时器循环（用于绘制帧），而在鼠标向下滑动时停止任何先前的视频。
var canvas, context, video, xStart, yStart, xEnd, yEnd;
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.addEventListener("mousedown", mouseDown);
canvas.addEventListener("mouseup", mouseUp);
function mouseDown(e) {
if (video) {
video.pause();
video = null;
context.clearRect(0, 0, canvas.width, canvas.height);
}
xStart = e.offsetX;
yStart = e.offsetY;
}
function mouseUp(e) {
xEnd = e.offsetX;
yEnd = e.offsetY;
if (xStart != xEnd && yStart != yEnd) {
video = document.createElement("video");
video.src = "http://techslides.com/demos/sample-videos/small.mp4";
video.addEventListener('loadeddata', function() {
console.log("loadeddata");
video.play();
setTimeout(videoLoop, 1000 / 30);
});
}
}
function videoLoop() {
if (video && !video.paused && !video.ended) {
context.drawImage(video, xStart, yStart, xEnd - xStart, yEnd - yStart);
setTimeout(videoLoop, 1000 / 30);
}
}
解决方案2
2 2015-11-20 20:50:52
您需要设置一个连续渲染。 您只渲染视频的第一帧。 画布很笨，不了解视频。 您刚刚将视频中的像素转储到了画布上。 您需要不断更新画布。
最好的方法是使用requestAnimationFrame ，以确保所有内容都与浏览器自己的呈现同步。
在下面的示例中，加载视频后开始渲染。 如果您加载第二个视频，请确保结束以前的更新。
var canvas = document.getElementById("canV"); var ctx = canvas.getContext("2d"); var video = document.createElement("video"); video.src = "http://techslides.com/demos/sample-videos/small.mp4"; video.addEventListener('loadeddata', function() { video.play(); // start playing update(); //Start rendering }); function update(){ ctx.drawImage(video,0,0,256,256); requestAnimationFrame(update); // wait for the browser to be ready to present another animation fram. }
#canV { width:256px; height:256px; }
<canvas id="canV" width=256 height=256></canvas>
解决方案3
-1 2016-06-03 06:49:15
从最近几天开始，我正在从事一个称为色度键控效果的项目，其中包含两个视频的混合。因此，在互联网上搜索了很长时间后，我发现了一个名为RecordRTC的API，该API可以为您提供解决方案。
HTML5 Canvas 第一次绘制时未显示来自视频的图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.