Исчезает значок, когда видео html5 заканчивается

Question

Я пытаюсь исчезнуть в иконке, когда видео заканчивается sh, но ничего.

Html

<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

Вы можете достичь этого таким образом

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

Answer 2

Вы можете попробовать так:

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