So rufen Sie eine Funktion auf video-Ende ? (HTML5 und mediaelementjs)

ich bin mit mediaelementjs für die Wiedergabe von video auf meiner website, aber ich brauche, um eine

Funktion am ENDE/pause video.Also bitte sagen Sie mir, wie Sie eine ich das tun?

Vielen Dank im Voraus

  • Es gibt Ereignisse, ausgesetzt in der api, die Sie erwähnt, so binden Sie Ihre Funktion auf diese Ereignisse, wie Sie zu erreichen ist, gibt es ein Beispiel in der ganz unten der link, den Sie zur Verfügung gestellt.
InformationsquelleAutor Peeyush | 2011-08-01
  1. 16

    Müssen Sie erstellen eine neue EventListener für die ended und pause Veranstaltungen.

    Beispiel:

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

    Update: Diese Methode sollte angewendet werden, auf die Erfolgs-handler erstellen Sie das element, wie im Beispiel gezeigt auf der Unterseite der Seite, auf MediaElementJS.com

    success: function (YourMediaElement, domObject) { 

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

           //Do Stuff here

    }, false);
    • Dank var player = new MediaElementPlayer('#player2'); player.addEventListener('ended', function(){ alert("Hallo"); }); es gibt mir Fehler-player.addEventListener ist nicht eine Funktion
    • Ich aktualisiert meine Antwort
    • vielen Dank ,es funktioniert 🙂
    InformationsquelleAutor Semyazas
  2. 2

    Werden kann, wird es nützlich sein für jemanden...

    <!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>
    InformationsquelleAutor Developer
Schreibe einen Kommentar