JQuery выбрать HTML5 видео после создания и назначить EventListner

Я создаю видео Html5 и добавляю его на свою веб-страницу после того, как он был загружен пользователем. Я хочу захватить первый кадр видео и сохранить его как изображение, но сначала мне нужно дождаться загрузки видео до запуска сценария захвата.

Я продолжаю получать ошибку:

Ошибка типа uncaught: Object [object Object] не имеет метода addEventListener

Я думаю, проблема в том, что я не правильно выбираю видео. Поскольку у меня есть неизвестное количество видео на странице, и поскольку видео обернуто в 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.