我正在使用mediaelementjs在我的网站上播放视频,但我需要在视频结束/暂停时调用一些函数。请告诉我如何实现这个功能?
提前感谢。
我正在使用mediaelementjs在我的网站上播放视频,但我需要在视频结束/暂停时调用一些函数。请告诉我如何实现这个功能?
提前感谢。
你需要为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);
<!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>