CODEWITHSUNDEEP
javascriptjqueryhtml
user2554201
user2554201

Reputation: 33

javascript show div when HTML video ends

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>

Upvotes: 1

Views: 4852

Answers (2)

Jordan Davis
Jordan Davis

Reputation: 1520

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>

Upvotes: 1

lingo
lingo

Reputation: 1908

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>

Upvotes: 1

Related Questions