如何调用视频端的函数？（HTML5 和 mediaelementjs）

发布于 2024-11-27 09:55:45 字数 153 浏览 2 评论 0原文

我正在使用 mediaelementjs 在我的网站上播放视频，但我需要

在视频结束/暂停时调用一些函数。所以请告诉我如何做到这一点？

提前致谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一束光，穿透我孤独的魂 2024-12-04 09:55:45

您需要为 ending 和 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);

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

回复收藏 0 原文

静谧 2024-12-04 09:55:45

也许这对某人有用......

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

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>

回复收藏 0 原文

~没有更多了~