我对 MEjs 演示播放器做了一些更改，以便使用 Cortado Java 小程序在 IE/Safari 浏览器中播放 OGG。
我有播放/暂停功能，虽然 getPlayPosition() 没有获得当前位置(以毫秒为单位)，如 documentation 中所述、applet.currentTime 和 applet.duration 可以很好地用于此目的。
我认为将这些连接到 mejs 播放器上的当前位置指示器会很简单，但我遇到了问题。对象上的 setCurrentTime 在 IE 中导致 DOM Exception: InVALID_STATE_ERR (11)，在 Safari 中也会发生类似的错误。显然我要设置的对象不再存在？
下面的代码将播放和暂停，甚至在控制台中给出秒数/总数(必须在 IE 中启用 F12 工具。)是否有将其连接到播放栏的好方法？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 MediaElement</title>
<script src="../build/jquery.js"></script>
<script src="../build/mediaelement-and-player.js"></script>
<link rel="stylesheet" href="../build/mediaelementplayer.min.css" />
</head>
<body>
<h1>MediaElementPlayer.js</h1>
<p>Audio player</p>
<h2>OGG Player</h2>
<audio id="player2" src="http://www.archive.org/download/memoirs_holmes_0709_librivox/holmesmemoirs02doyle.ogg" type="" controls="controls">
</audio>
<script>
MediaElementPlayer.prototype.buildplaypauseOrig =
MediaElementPlayer.prototype.buildplaypause;
MediaElementPlayer.prototype.buildplaypause = function(a,b,c,d) {
if (d.src.indexOf('.ogg') !=-1 /* && IE or safari */) {
if (jQuery(this.$node).find('applet').length==0) {
jQuery(this.$node).append('<applet code="com.fluendo.player.Cortado.class" codebase="http://theora.org/" archive="cortado.jar" width="100" height="100">'+
'<param name="url" value="'+d.src+'"/><param name="seekable" value="true"/><param name="autoPlay", value="false"/></applet>');
}
var el = this.$node; //mejs audio element
var initonload = function() {
if (el.find('applet')[0].isActive) {
var applet = el.find('applet')[0];
// This is where it fails: mejs.players[0].setCurrentTime or d.setCurrentTime cause dom exception
console.log(applet.code);
console.log(applet.currentTime);
/*mejs.players[0]*/ //d.setCurrentTime(applet.currentTime);
console.log(applet.duration);
/*mejs.players[0]*/ //d.media.duration = applet.duration;
} else {
window.setTimeout(initonload,100);
}
}
d.addEventListener("play",function() {
var audio = el.attr('src');
window.setInterval(function() {
//try {
var applet = el.find('applet')[0];
console.log(applet.currentTime);
// This is where it fails: mejs.players[0].setCurrentTime or d.setCurrentTime cause dom exception
//mejs.players[0].setCurrentTime(applet.currentTime);
console.log(applet.duration);
/*mejs.players[0]*/ //d.media.duration = applet.duration;
//}catch(e) {console.log(e)}
//console.log(applet.getPlayPosition()+"ms");
},1000);
//jQuery(this).find('applet')[0].setParam('url',audio);
el.find('applet')[0].doPlay();
});
d.addEventListener("pause",function() {
var applet = el.find('applet')[0];
applet.doPause();
});
d.addEventListener("load",function(e) {
alert('load');
});
}
this.buildplaypauseOrig(a,b,c,d);
}
mejs.HtmlMediaElementShim.determinePlaybackOrig =
mejs.HtmlMediaElementShim.determinePlayback
mejs.HtmlMediaElementShim.determinePlayback = function(htmlMediaElement, options, supportsMediaTag, isMediaTag, src) {
var res = this.determinePlaybackOrig(htmlMediaElement, options, supportsMediaTag, isMediaTag, src);
//if (mejs.MediaFeatures.isIE) {
res.method = 'native';
//}
return res;
}
$('audio,video').mediaelementplayer();
</script>
</body>
</html>
这是使用 MeJS 2.10.3。
最佳答案
[编辑]
检查后 MediaElement.js代码，似乎是mejs.players不是一个数组，而是一个对象，为了访问第一个玩家，你必须查看 mejs.players['mep_0'] , 自 mejs.players[0]将是 undefined .
我的猜测是 jQuery 无法创建交互式 <applet>元素，因为根据我的经验，jQuery(严重依赖 document.createDocumentFragment )有时无法在动态创建/克隆的 DOM 节点上附加/触发事件，尤其是在 IE 中，这可能是导致您遇到的 DOM 错误的原因看到了，因为你的<applet>对象可能无法初始化。
要尝试解决此问题，我建议使用 native document.createElement和 document.appendChild方法而不是 jQuery.append .
if (jQuery(this.$node).find('applet').length==0) {
var createElem = function(name, attributes) {
var el = document.createElement(name);
attributes = attributes || {};
for (var a in attributes) {
el.setAttribute(a, attributes[a]);
}
return el;
};
var applet = createElem('applet',{
code:'com.fluendo.player.Cortado.class',
codebase: 'http://theora.org/',
archive: 'cortado.jar',
width: 100,
height: 100
});
applet.appendChild(createElem('param', {name:'url', value:d.src}));
applet.appendChild(createElem('param', {name:'seekable', value: 'true'}));
applet.appendChild(createElem('param', {name:'autoPlay', value: 'false'}));
this.$node.get(0).appendChild(applet);
}
关于javascript - MediaElement.js 中的 Cortado Ogg-player - 几乎可以正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15313738/