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