3

Cortado Java アプレットを使用して、IE/Safari ブラウザーで OGG を再生できるように、MEjs デモ プレーヤーにいくつかの変更を加えました。

私は再生/一時停止を行っていますが、 getPlayPosition() はドキュメントに記載されているようにミリ秒単位で現在の位置を取得していませんが、この目的applet.currentTimeにapplet.durationはうまく機能します。

これらを mejs プレーヤーの現在の位置インジケーターに接続するのは簡単だと思っていましたが、問題が発生しています。setCurrentTimeIE でオブジェクトに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.playersmejs.players['mep_0']mejs.players[0]undefined

私<applet>の経験から、jQuery (に大きく依存しているdocument.createDocumentFragment) は、動的に作成/複製された DOM ノード、特に IE でイベントをアタッチ/トリガーできないことがあるからです。<applet>オブジェクトの初期化に失敗した可能性があるため、表示されているこのDOMエラーについて。

この問題を解決するには、 の代わりにネイティブ メソッドdocument.createElementとメソッドを使用することをお勧めします。document.appendChildjQuery.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 に答える