VideoJS - Executing JS function at end of playback

Question

I'm using VideoJS to play a video on a web page. I would like, at the end of the video to execute a java script in oder to hide the video DIV and display a other DIV.

Is somebody could help me to do this?

Maximilien

Answer 1

Thank you misterben you solution is working fine. I did the following to adapt to what I had:

    <video id="video"
        class="video-js vjs-default-skin vjs-big-play-centered"
        controls preload="auto" width="800" height="450"
        poster="images/fond.png" data-setup='{}'>
        <source src="video/video.mp4" type="video/mp4" /> 
        <source src="video/video.webm" type="video/webm" /> 
        <source src="video/video.ogv" type="video/ogg" />
    </video>
    <div id="replacingdiv">
        <img class="replacingimg" src="./images/invitation.png" alt="Invitation" />
    </div>  



videojs("video").ready(function() {
        var myPlayer = this;    // Store the video object
        var aspectRatio = 9/16; // Make up an aspect ratio

        function resizeVideoJS() {
            // Get the parent element's actual width
            var width = $(window).width();
            if ( width < 800)  {
                myPlayer.width(width - 10).height( (width -10) * aspectRatio );
                $('.replacingimg').width(width - 10).height( (width -10) * aspectRatio);

            }
        }

        myPlayer.on('ended',function() {
            $('#video').delay( 2000 ).fadeOut( "slow" , function() {
                $('#replacingdiv').fadeIn("slow");
            });
        });

        resizeVideoJS(); // Initialize the function
        window.onresize = resizeVideoJS; // Call the function on resize
    });