How to call a function on video end ? (HTML5 and mediaelementjs)

javascript jquery html mediaelement mediaelement.js

20,002

Solution 1

You need to create a new EventListener for the ended and pause events.

Example:

YourMediaElement.addEventListener('ended', function(){
    //Your Code goes here
});

Update: This method should be applied on the success handler of creating the element, as is shown in the example on the bottom of the page at MediaElementJS.com

success: function (YourMediaElement, domObject) { 

    // add event listener
    YourMediaElement.addEventListener('ended', function(e) {

           //Do Stuff here

    }, false);

Solution 2

May be it will be useful for someone...

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <title>Media Website</title>
    <script type="text/javascript" src="build/jquery.js"></script>
    <script type="text/javascript" src="build/mediaelement-and-player.min.js"></script>
    <link href="build/mediaelementplayer.min.css" rel="Stylesheet" />
    <link href="build/mejs-skins.css" rel="Stylesheet" />
    <style type="text/css">
        html, body
        {
            overflow: hidden;
        }
        *
        {
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script type="text/javascript">



         $(document).ready(function () {

            var height = getURLParameters('height');
            $("#player1").css("height", height + "px");

            var width = getURLParameters('width');
            $("#player1").css("width", width + "px");


        });

        function getURLParameters(paramName) {
            var sURL = window.document.URL.toString();
            if (sURL.indexOf("?") > 0) {
                var arrParams = sURL.split("?");
                var arrURLParams = arrParams[1].split("&");
                var arrParamNames = new Array(arrURLParams.length);
                var arrParamValues = new Array(arrURLParams.length);
                var i = 0;
                for (i = 0; i < arrURLParams.length; i++) {
                    var sParam = arrURLParams[i].split("=");
                    arrParamNames[i] = sParam[0];
                    if (sParam[1] != "")
                        arrParamValues[i] = unescape(sParam[1]);
                    else
                        arrParamValues[i] = "No Value";
                }

                for (i = 0; i < arrURLParams.length; i++) {
                    if (arrParamNames[i] == paramName) {
                        //alert("Param:"+arrParamValues[i]);
                        return arrParamValues[i];
                    }
                }
                return "No Parameters Found";
            }

        }  

        function ChangeSize(h, w) {
            $("#player1").css("height", h + "px");
            $("#player1").css("width", w + "px");
        }

        var videoLink;
        var videoLinkType;
        var posterLink;

        function SetPosterLink(p) {
            posterLink = p; 
            $("#player1").attr("poster", posterLink);
        }

        function SetVideoLink(l, t) {           

            videoLink = l;
            videoLinkType = t;

            $("#player1").attr("src", videoLink);
            $("#player1").attr("type", videoLinkType);

        }

        var player;
        function CreatePlayer() {
            player = MediaElement('player1',
            {
                success: function (me) {
                    //  me.play();
                    me.addEventListener('ended', function (e) {
                        //Do Stuff here
                        alert('ended');
                    }, false);
                }
            });
        }

        function Play() {         
            player.play();
        }

        function Pause() {
            player.pause();                
        }

        function Stop() {
            player.pause();                
        }

    </script>
</head>
<body style="overflow: hidden; margin: 0 !important; padding: 0 !important;">


  <video controls="none" preload="none" width="0" height="0" style="margin: 0 !important;
        padding: 0 !important; overflow: hidden;" id="player1" name="mplayer1" src=""
        type="" poster="">
    </video>

</body>
</html>

20,002

Author by

Peeyush

#Code,#Developer,#Traveller,#ShutterBug

Updated on February 02, 2020

Comments

Peeyush over 4 years

i am using mediaelementjs for playing video on my website but i need to call some

function at the END/pause of video.So please tell me how an i do this?

Thanks in advance
Peeyush almost 13 years

thanks var player = new MediaElementPlayer('#player2'); player.addEventListener('ended', function(){ alert("hi"); }); it gives me error player.addEventListener is not a function