视频html5结束时淡入图标答案

【问题标题】：Fade in icon when video html5 ends视频html5结束时淡入图标
【发布时间】：2020-01-12 12:49:13
【问题描述】：

我正在尝试在视频结束时淡入图标，但没有。

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

【问题讨论】：

这能回答你的问题吗？ Detect when an HTML5 video finishes
我总是在使用这个解决方案的控制台中得到“Uncaught TypeError: Cannot read property 'addEventListener' of null”，也许我做错了什么

标签： javascript jquery fadein fadeout

【解决方案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();
};

【讨论】：

我认为它的 fadeIn()。无论如何，如果我使用 getElementById，它工作正常，但如果我使用 getElementsByClass 不起作用，或者如果我使用 getElementByTagName。无论如何，为什么我的代码不起作用？我看不懂。

【解决方案2】：

你可以这样实现

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

【讨论】：