Question

我试图在画布上绘制视频。为了实现这一点，我在Javascript中捕获onMouseDown和onMouseUp事件以获取每个事件的x和y坐标（我需要在画布内设置视频的位置，宽度和高度）。

因此，每当我在画布上绘制视频时，我应该停止之前的创建，并且必须播放新的视频。两个问题：

1）视频无法播放（该功能仅绘制第一帧），但他的音频确实

2）如何才能停止以前制作的视频？

演示：http://jsfiddle.net/e3c3kore/

Answer 1

您需要设置连续渲染。您只渲染视频的第一帧。画布是愚蠢的，不知道视频。您刚刚将视频中的像素转储到画布上。您需要不断更新画布。

最好的方法是使用requestAnimationFrame，这样可以确保所有内容都与浏览器自己的渲染同步。

在下面的示例中，在加载视频时启动渲染。如果您加载第二个视频，请务必结束以前的更新。

＆＃13;

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.       
}

＆＃13;

#canV {
  width:256px;
  height:256px;
}

＆＃13;

<canvas id="canV" width=256 height=256></canvas>

＆＃13;

Answer 2

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);
    }
}

Answer 3

从最近几天起，我正在开展一个名为色度键控效果的项目，其中包括混合两个视频。因此，在互联网上搜索了很长时间后，我发现了一个名为RecordRTC的API，这个API可以为您提供解决方案。

在画布HTML5上绘制视频

3 个答案: