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

Question

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

There are events exposed in the api you mentioned so bind your function to these events, how to achieve this, there is an example in the very bottom of the link you provided. — Asad Rasheed, Aug 01 '11 at 10:04

Semyazas · Accepted Answer · 2011-08-01T10:32:04.420

18

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

edited Aug 01 '11 at 10:32

answered Aug 01 '11 at 10:12

Semyazas

2,101
14
14

thanks var player = new MediaElementPlayer('#player2'); player.addEventListener('ended', function(){ alert("hi"); }); it gives me error player.addEventListener is not a function – Peeyush Aug 01 '11 at 10:26

score 2 · Answer 2 · answered Feb 01 '13 at 18:36

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>

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

2 Answers2

Linked