jQuery 监听视频事件

Question

在 SO 和 google 上进行了很多搜索，但到目前为止我没有尝试过按预期工作。我正在尝试使用 JQuery 捕捉视频事件。

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

我在 html 中有以下 div：

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

使用 JavaScript 和 JQuery，我对 div 执行以下操作：

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

这可以用视频内容代替图像内容。但是，当我尝试收听视频的事件时，我什么也得不到。请参阅我为此使用的以下代码：

vidDiv.bind('mouseleave ended', function(){
                    console.log("Event triggered!");
            });

请注意，我尝试过 on 而不是 bind 没有成功。元素 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);

Answer 1

使用事件处理程序创建适当的元素：

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) );