3

我对 MEjs 演示播放器进行了一些更改，以便使用 Cortado Java 小程序在 IE/Safari 浏览器中播放 OGG。

我有播放/暂停工作，虽然 getPlayPosition() 没有按照文档中的描述以毫秒为单位获得当前位置，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。

4

1 回答 1

-1

[编辑]
检查MediaElement.js代码后，它似乎mejs.players不是一个数组，而是一个对象，为了访问第一个播放器，您必须查看，mejs.players['mep_0']因为.mejs.players[0]undefined

我的猜测是 jQuery 无法创建交互式<applet>元素，因为根据我的经验，jQuery（严重依赖 jQuery document.createDocumentFragment）有时无法在动态创建/克隆的 DOM 节点上附加/触发事件，尤其是在 IE 中，这可能是原因对于您看到的这个 DOM 错误，因为您的<applet>对象可能无法初始化。

要尝试解决此问题，我建议使用本机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);
}
于 2013-03-25T13:06:17.860 回答