Javascript JQuery在创建后选择html5视频并分配EventListner

我正在创建一个Html5视频，并在用户上传后将其添加到我的网页中。 我想捕获视频的第一帧并将其保存为图像，但我首先需要等到视频加载完毕后再运行捕获脚本

我不断得到错误：

未捕获类型错误：对象[Object]没有方法 加法器

我认为问题在于我没有正确选择视频。因为我在页面上有未知数量的视频，并且视频被包装在具有唯一ID的div中，所以我当前选择视频如下：

var video = $('#'+response).find(">:first-child");

这是我的完整代码：

    var video = $('#'+videoID).find(">:first-child");
        console.log(video);

video.addEventListener('canplay', function(e) {
    var ratio = video.videoWidth / video.videoHeight;
    var w = 400;
    var h = 200;

    var canvas = document.createElement("canvas");
    canvas.width = w;
    canvas.height = h;

    context.fillRect(0, 0, w, h);
    context.drawImage(video, 0, 0, w, h);

    var dataURL = canvas.toDataURL();

第2行的控制台输出返回视频对象，因此我不明白为什么不能分配EventListener。

jQuery使用on，而addEventListener在可用时使用addEventListener，但也支持旧IE

---

$和其他jQuery函数返回一个类似于元素集合的jQuery对象。

我觉得自己太愚蠢了，以至于错过了这一点：在一个项目上工作10个小时对你来说就是这样！谢谢