视频 html5 结束时淡入图标

Question

我试图在视频结束时淡入图标，但什么都没有。

目录

<video>
<source src="">
</video>
<div class="icon"></div>

第一次尝试

$("video").on("ended", function() { 
$(".icon").fadeIn;
});

第二次尝试

$('video').parent().on("ended", function() {
if($(this).children("video").get(0).paused) { 
$(this).children(".icon").fadeIn();
}
});

实际上onclick事件工作正常

$("video").parent().on("click", function() {         
$(this).children(".icon").fadeToggle(); 
});

Answer 1

你可以试试这种方式：

<video id="myVideo">
<source src="">
</video>
<div class="icon"></div>
var vid = document.getElementById("myVideo");
vid.onended = function() {
alert("The video has ended");  //Just to verify if the event is trapped
$(".icon").fadeIn();
};

Answer 2

你可以通过这种方式实现它

document.getElementById('video').addEventListener('ended',function() {
$(".icon").fadeIn();
},false);