在画布HTML5上绘制视频 [英] Draw video on canvas HTML5
问题描述
我正在尝试在画布上绘制视频.为此，我捕获了Javascript中的onMouseDown和onMouseUp事件，以获取每个事件的x和y坐标(我需要在画布内设置视频的位置，宽度和高度).
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).
因此，每次我在画布上绘制视频时，应停止创建的视频，而必须播放新的视频.两个问题:
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)视频不播放(该功能仅绘制第一帧)，但音频播放
1) the video doesn't play (the function only draws the first frame), but his audio does
2)我如何才能停止先前绘制的视频?
2) how can I get previously drawn videos to stop?
演示: 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/
推荐答案
1)drawImage()方法仅被调用一次.每帧需要调用一次.
1) The drawImage() method was only be called once. It needs to be called once per frame.
2)调用pause()方法停止视频.
2) Call pause() method to stop video.
例如，以下代码在鼠标向上滑动时启动一个计时器循环(用于绘制帧)，而在鼠标向下滑动时停止任何先前的视频.
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);
}
}
这篇关于在画布HTML5上绘制视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
