在画布HTML5上绘制视频
[英]Draw video on canvas HTML5
问题描述
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);
});
}
}
Demo: http://jsfiddle.net/e3c3kore/ 演示： http ： //jsfiddle.net/e3c3kore/
3 个解决方案
解决方案1
3 已采纳 2015-11-20 20:51:40
1) The drawImage() method was only be called once. 1）drawImage（）方法仅被调用一次。 It needs to be called once per frame. 每帧需要调用一次。
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);
}
}
解决方案2
2 2015-11-20 20:50:52
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. 您需要不断更新画布。
The best way is to use requestAnimationFrame this 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>
解决方案3
-1 2016-06-03 06:49:15
从最近几天开始，我正在从事一个称为色度键控效果的项目，其中包含两个视频的混合。因此，在互联网上搜索了很长时间后，我发现了一个名为RecordRTC的API，该API可以为您提供解决方案。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.