Question

我正在尝试从画布上的video元素中绘制视频。我写了以下JS代码：

$(function () {
    var video = $("#video");
    video.bind("loadedmetadata", function () {
        var vw = this.videoWidth;
        var vh = this.videoHeight;
        var canvas = $('#canvas');
        canvas.width(vw).height(vh);
        var context = canvas.getContext("2d");

        video.addEventListener("play", function () { draw(video, context, vw, vh); }, false);
    });
});
function draw(video, context, vw, vh)
{
    if (video.paused || video.ended)
    {              
        return false;
    }

    context.drawImage(video, 0, 0, vw, vh);
    setTimeout(draw, 20, video, context, vw, vh);
}

这是我的HTML：

<body>
<video id="video" autoplay controls>
    <source src="src1.avi" />
    <source src="src2.mov" />
    <source src="src3.ogg" />
    <source src="src4.avi" />
</video>
<canvas id="canvas">
    Please update your browser.
</canvas>

JSFiddle here

我可以看到视频正在播放，但它没有重新绘制到画布上。哪里是我的错？

Answer 1

如果您不确定自己在做什么，那么将jQuery与视频和画布（以及音频）等元素一起使用会遇到麻烦。

例如，您在jQuery对象上调用getContext()，videoWidth，videoHeight等等，这些对象无法正常运行，并且还将vanilla JavaScript与jQuery混合使用，例如{{1 }和bind()。

我的第一个建议是在使用这些元素时使用普通的JavaScript，因为不仅生活变得不那么麻烦，而且你也会获得一些对这些元素至关重要的性能。

其次，始终将addEventListener()与视频和画布一起使用。没有机会与requestAnimationFrame / setTimeout正确同步这些内容。 rAF将确保更新帧以在正确的时间进行监控。有了视频，你可以toggle the speed，因为视频很少超过30 FPS（在欧洲只有25 FPS），它会为你提供额外的性能空间。

这是一个 working code （仍然需要清理......）：

HTML - 在视频代码中添加setInterval以在播放前捕获元数据：

preload = "auto"

<强>的JavaScript

<video id="video" preload=auto autoplay controls>

在画布上绘制视频

1 个答案: