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

JQuery select html5 video after creation and assign EventListner

本文关键字：视频 分配 EventListner html5 选择 创建 JQuery      更新时间：2024-06-26

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

我一直收到错误：

未捕获类型错误：Object[Object Object]没有方法addEventListener

我认为问题是我没有正确选择视频。因为我在页面上有未知数量的视频，而且视频被包装在一个具有唯一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对象，它就像一个元素集合。

相关文章：