如何在视频结束时调用函数？（HTML5和mediaelementjs）

Question

如何在视频结束时调用函数？（HTML5和mediaelementjs）

javascriptjqueryhtmlmediaelementmediaelement.js

10

我正在使用mediaelementjs在我的网站上播放视频，但我需要在视频结束/暂停时调用一些函数。请告诉我如何实现这个功能？

提前感谢。

- Peeyush

1

在你提到的API中，有一些事件被公开，因此将你的函数绑定到这些事件上，如何实现呢？你可以在你提供的链接底部找到一个示例。 - Asad Rasheed

2个回答

2

也许对某些人会有用...

（注意：保留原文的HTML标签）

<!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>

- NoWar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Semyazas · Accepted Answer

你需要为ended和pause事件创建一个新的EventListener。

例如：

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

更新：此方法应该应用在创建元素的成功处理程序中，就像在MediaElementJS.com页面底部的示例中所示。

success: function (YourMediaElement, domObject) { 

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

           //Do Stuff here

    }, false);