MediaElement.js 中的 Cortado Ogg 播放器 - 几乎可以正常工作答案

【问题标题】：Cortado Ogg-player in MediaElement.js - almost workingMediaElement.js 中的 Cortado Ogg 播放器 - 几乎可以正常工作
【发布时间】：2013-03-09 17:29:13
【问题描述】：

我对 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。

【问题讨论】：

标签： javascript dom mediaelement.js ogg cortado

【解决方案1】：

[编辑]
检查MediaElement.js 代码后，似乎mejs.players 不是一个数组，而是一个对象，为了访问第一个玩家，您必须查看mejs.players['mep_0']，因为mejs.players[0] 将是@987654326 @。

我的猜测是 jQuery 无法创建交互式 <applet> 元素，因为根据我的经验，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);
}

【讨论】：

谢谢，但它确实创建了小程序元素，播放和暂停有效，console.log-ing 时间有效，但调用mejs.players[0].setCurrentTime(applet.currentTime); 失败。
查看MediaElement.js代码后，mejs.players似乎不是一个数组，而是一个对象。要找到第一个玩家，您必须查看mejs.players['mep_0']。 mejs.players[0] 将是未定义的。
我注意到，当我使用最新的 ME.js 再次尝试此操作时，但这适用于我不久前开始的旧版本。