javascript 如何在视频端调用函数？（HTML5 和 mediaelementjs）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6896625/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to call a function on video end ? (HTML5 and mediaelementjs)
提问by Peeyush
i am using mediaelementjsfor playing video on my website but i need to call some
我正在使用mediaelementjs在我的网站上播放视频，但我需要调用一些
function at the END/pause of video.So please tell me how an i do this?
在视频结束/暂停时的功能。所以请告诉我我是如何做到的？
Thanks in advance
提前致谢
回答by Semyazas
You need to create a new EventListenerfor the endedand pauseevents.
您需要EventListener为ended和pause事件创建一个新的。
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
更新：此方法应应用于创建元素的成功处理程序，如MediaElementJS.com页面底部的示例所示
success: function (YourMediaElement, domObject) {
// add event listener
YourMediaElement.addEventListener('ended', function(e) {
//Do Stuff here
}, false);
回答by Developer
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>
