javascript 在画布 HTML5 上绘制视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33834724/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Draw video on canvas HTML5
提问by user3673449
I'm trying to draw a video on a canvas. To achieve this I capture the onMouseDown and onMouseUp events in Javascript to get the x and y coordinates of each event (that I need to set the position, width and height of the video inside the canvas).
我正在尝试在画布上绘制视频。为此，我在 Javascript 中捕获 onMouseDown 和 onMouseUp 事件以获取每个事件的 x 和 y 坐标（我需要在画布内设置视频的位置、宽度和高度）。
Therefore, every time I draw a video on the canvas, the previous I create should be stopped and the new one has to be played. Two problems:
因此，每次我在画布上绘制视频时，都应该停止我创建的前一个视频，而必须播放新的视频。两个问题：
1) the video doesn't play (the function only draws the first frame), but his audio does
1）视频不播放（该函数只绘制第一帧），但他的音频不播放
2) how can I get previously drawn videos to stop?
2）我怎样才能让以前绘制的视频停止？
Demo: http://jsfiddle.net/e3c3kore/
演示：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);
});
}
}
采纳答案by Bobby Orndorff
1) The drawImage() method was only be called once. It needs to be called once per frame.
1) drawImage() 方法只被调用一次。它需要每帧调用一次。
2) Call pause() method to stop video.
2) 调用 pause() 方法停止视频。
For example, the follow code starts a timer loop (for drawing the frames) on mouse up and stops any previous video on mouse down.
例如，下面的代码在鼠标向上时启动一个计时器循环（用于绘制帧），并在鼠标向下时停止任何以前的视频。
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);
}
}
回答by Blindman67
You need to set up a continuous rendering. You are only rendering the first frame of the video. Canvas is dumb and does not know about videos. You have just dumped pixels from the video onto the canvas. You need to update the canvas continuously.
您需要设置连续渲染。您只渲染视频的第一帧。Canvas 很笨，不知道视频。您刚刚将视频中的像素转储到画布上。您需要不断更新画布。
The best way is to use requestAnimationFramethis makes sure everything is synced up with the browsers own rendering.
最好的方法是使用requestAnimationFrame它确保所有内容都与浏览器自己的渲染同步。
In the example below the rendering is started when the video is loaded. Be sure to end the previous updates if you load a second video.
在下面的示例中，当加载视频时开始渲染。如果您加载第二个视频，请务必结束之前的更新。
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>回答by CyberAbhay
From last few days i am working on same project called as chroma keying effect which consist f mixing of two videos.so after searching a long on internet i found an api called RecordRTC this API can give you a solution.
从最近几天开始，我正在研究称为色度键控效果的同一个项目，它由两个视频的混合组成。所以在互联网上搜索了很长时间后，我发现了一个名为 RecordRTC 的 API，该 API 可以为您提供解决方案。
