Fade in icon when video html5 ends

Question

I am trying to fade in an icon when video finish, but nothing.

Html

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

First Try

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

Second try

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

Actually has onclick event working fine

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

Does this answer your question? [Detect when an HTML5 video finishes](https://stackoverflow.com/questions/2741493/detect-when-an-html5-video-finishes) — dryleaf, Jan 12 '20 at 12:53
i always get "Uncaught TypeError: Cannot read property 'addEventListener' of null" in console with this solution, maybe i am doing something wrong — Jose, Jan 12 '20 at 13:15

Nicola Lepetit · Answer 1 · 2020-01-12T13:10:34.450

0

You can try this way:

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

edited Jan 12 '20 at 13:10

answered Jan 12 '20 at 12:57

Nicola Lepetit

756
8
25

I think its fadeIn(). Anyway its working fine if i use getElementById, but if i use getElementsByClass doesnt work, or if i use getElementByTagName. Anyway why my code doesnt work? i cant understand it. – Jose Jan 12 '20 at 13:47

score 0 · Answer 2 · answered Jan 12 '20 at 14:19

0

You can achieve it in this way

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

answered Jan 12 '20 at 14:19

Nguyễn Văn Phong

13,506
17
39
56

Fade in icon when video html5 ends

2 Answers2