Javascript 视频html5结束时的淡入图标

我试图在视频结束时淡入一个图标，但什么也没有

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

您可以这样尝试：

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

var vid=document.getElementById（“myVideo”）；
vid.onended=函数（）{
警报（“视频已结束”）；//仅用于验证事件是否被捕获
$（“.icon”）.fadeIn（）；
};

您可以这样尝试：

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

var vid=document.getElementById（“myVideo”）；
vid.onended=函数（）{
警报（“视频已结束”）；//仅用于验证事件是否被捕获
$（“.icon”）.fadeIn（）；
};

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

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

---

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

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

---

这回答了你的问题吗？使用此解决方案，我总是在控制台中得到“UncaughtTypeError:无法读取null的属性'addEventListener'，可能我做错了什么这是否回答了您的问题？使用此解决方案，我总是在控制台中得到“Uncaught TypeError:无法读取null的属性'addEventListener'，可能我做了一些错误的事情，我认为它是fadeIn（）。无论如何，如果我使用getElementById，它可以正常工作，但是如果我使用getElementsByClass，或者如果我使用getElementByTagName，它就不能工作。不管怎样，为什么我的代码不起作用？我听不懂，我想它已经过时了。无论如何，如果我使用getElementById，它可以正常工作，但是如果我使用getElementsByClass，或者如果我使用getElementByTagName，它就不能工作。不管怎样，为什么我的代码不起作用？我不明白。