Javascript JQuery监听视频事件

在SO和google上搜索了很多，但到目前为止，我所尝试的一切都没有达到预期效果。我试图用JQuery捕捉视频事件

这是一个稍微不同的情况，因为我正在调整一个已经存在的divs html内容，从一个普通的图像到一个视频

我在html中有以下div：

<div id="video" class="grid_cell"><img src="../assets/test.jpg" /></div>

注意：我在上尝试了

而不是
绑定
，但未成功。元素vidDiv是我之前获取的JQuery对象。由于
vidDiv.html（…）
部分工作并将内容更改为视频，我知道连接是正确的

此外，我还特意加入了
mouseleave
事件，以查看是否会触发任何事件，并确保在使用鼠标离开div时，该事件能够正常工作。但当视频播放完后，我没有收到这样的事件

有什么想法吗

编辑：

我接受了下面的答案，这是可行的，但我也想在这里介绍一种使用纯JS和一些JQuery的替代方法：

vidDiv.html('<video width="' + w + '" height="' + h + '" autoplay="autoplay">' +
                        '<source src="' + src + '" type="' + type + '"></source>' +
                        '</video>');

            var elementId = vidDiv.attr("id");
            var elem = document.getElementById(elementId);
            elem.addEventListener('ended', function(e) { console.log("Video ended"); }, true);

vidDiv.html（“”+
'' +
'');
var elementId=vidDiv.attr（“id”）；
var elem=document.getElementById（elementId）；
elem.addEventListener（'end'，函数（e）{console.log（“Video end”）；}，true）；
使用事件处理程序创建适当的元素：

var fn = function() {
            console.log('Event triggered!')
    },
    video = $('<video />', {
        width    : w,
        height   : h,
        autoplay : 'autoplay',
        on       : {
            mouseleave: fn,
            ended     : fn
        }
    }),
    source = $('<source />', {
        src  : src,
        type : 'video/mp4'
    }
);

vidDiv.html( video.append(source) );

var fn=function（）{
console.log（'事件已触发！'）
},
视频=$（''）{
宽度：w，
高度:h,，
自动播放：“自动播放”，
关于：{
mouseleave:fn，
完:fn
}
}),
来源=$（''）{
src:src，
类型：“视频/mp4”
}
);
html（video.append（source））；
您是否尝试过类似库之类的功能？视频事件很难跨浏览器获得正确的信息。媒体事件不会冒泡。你必须直接绑定。请参阅相关内容：这在一定程度上是有效的，但是回调函数不会触发我得到一个非常奇怪的运行时错误；以下内容：
Uncaught SyntaxError:uncontracted token（
有趣的是，它只在视频实际播放完毕时才会触发，因此它似乎捕捉到了正确的事件，但事件处理程序导致了错误。是的，使用完全相同的代码不会发生任何事情，但如果我打开
：{…}
to
onended:fn
我得到了运行时错误。JSFIDLE也适用于我。然后我真的不知道，这应该按它的方式工作，如果没有其他错误。如果鼠标事件正在启动，但没有启动onended事件，则是某种原因导致该事件无法正常启动，我真的不知道会发生什么be.是的，我在这里也不知所措。到目前为止，我给了你+1的帮助。我知道你的代码可以工作，但我怀疑可能是其他原因导致了这个问题。当检查chrome中的元素时，它是这样的：
上的
是保存事件监听器的对象。…
我无法再检查它了。哦，这也是值得的提到这次没有触发任何事件，
end
或
mouseleave
。上面的代码不应该将事件处理程序附加到元素上，您不应该在HTML中看到任何
on=
？您使用的是什么版本的jQuery。
vidDiv.html('<video width="' + w + '" height="' + h + '" autoplay="autoplay">' +
                        '<source src="' + src + '" type="' + type + '"></source>' +
                        '</video>');

            var elementId = vidDiv.attr("id");
            var elem = document.getElementById(elementId);
            elem.addEventListener('ended', function(e) { console.log("Video ended"); }, true);

var fn = function() {
            console.log('Event triggered!')
    },
    video = $('<video />', {
        width    : w,
        height   : h,
        autoplay : 'autoplay',
        on       : {
            mouseleave: fn,
            ended     : fn
        }
    }),
    source = $('<source />', {
        src  : src,
        type : 'video/mp4'
    }
);

vidDiv.html( video.append(source) );