javascript show div when HTML video ends

Question

I need the contents of a div to display after an HTML video ends. I saw this post which is a start, but I'm lost on the actual function: Detect when an HTML5 video finishes

<video src="video.ogv" id="myVideo">
  video not supported
</video>

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        // need to show a hidden div!
    }
</script>

get the hidden div with it's `id` and show it, using something like `$('#divID').show();` — Patel, Aug 04 '15 at 21:01

score 1 · Answer 1 · answered Aug 04 '15 at 21:08

You can hide div by id when the page loads, and show it again when video ends.

<video src="video.ogv" id="myVideo">
  video not supported
</video>

<div id="divId">
    Hello world!
</div>

<script type='text/javascript'>
    $(document).ready(function() {
        $("#divId").hide();
    });

    document.getElementById('myVideo').addEventListener('ended',myHandler,false);

    function myHandler(e) {
        $("#divId").show();
    }
</script>

score 1 · Accepted Answer · answered Aug 04 '15 at 21:11

This should do the trick... I used example "classes" and "ids" since I don't have your full source code.

//CODE

<!DOCTYPE html>
<html>
<head>
<style>
.div-hide{
    display: none;
}
</style>
<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);

    function myHandler(e){
        var div = document.getElementById("selectme");
        div.classList.remove("div-hide");
        div.innerHTML = "I'm showing";
    }
</script>
</head>
<body>
    <video src="video.ogv" id="myVideo">
      video not supported
    </video>
    <div id="selectme" class="div-hide">I'm Hidden</div>
</body>
</html>

javascript show div when HTML video ends

2 Answers2