MediaElement.js中的Cortado Ogg播放器 - 幾乎可以工作

我對MEjs演示播放器進行了一些更改，以使用Cortado Java小程序在IE/Safari瀏覽器中啓用OGG播放。MediaElement.js中的Cortado Ogg播放器 - 幾乎可以工作

我有播放/暫停工作，雖然getPlayPosition（）作爲用於此目的的documentation，applet.currentTime和applet.duration工作描述也沒有得到以毫秒爲單位的當前位置。

我認爲將它們連接到mejs播放器上的當前位置指示器很簡單，但我遇到了一個問題。對象上的setCurrentTime在IE中導致DOM Exception: InVALID_STATE_ERR (11)，並且在Safari中發生類似的錯誤。顯然我試圖設置的對象不再存在？

下面的代碼將播放和暫停，甚至在控制檯中給出秒/總數（F12工具必須在IE中啓用）。是否有一種很好的方法將它連接到播放欄？

<!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。

來源

2013-03-09 NoBugs

-1

[編輯]
檢查MediaElement.js代碼後，似乎mejs.players不是一個數組，而是一個對象，並以訪問的第一個球員，你就必須尋找到mejs.players['mep_0']，因爲mejs.players[0]會是undefined。

我的猜測是，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); 
}

來源

2013-03-25 13:06:17 ArtBIT

謝謝，但它確實* *創建applet元素，播放和暫停工作，執行console.log-ING的時間工作，但調用'mejs.players [0] .setCurrentTime（applet.currentTime）;'失敗。 – NoBugs 2013-03-25 14:06:33

檢查[MediaElement.js]（http://mediaelementjs.com/）代碼後，似乎'mejs.players'不是一個數組，而是一個對象。要找到第一個玩家，你必須看看'mejs.players ['mep_0']'。 'mejs.players [0]'將是未定義的。 – ArtBIT 2013-03-27 11:33:58

我注意到當我用最新的ME.js再次嘗試時，但是這適用於我以前開始的舊版本。 – NoBugs 2013-03-28 00:58:00

MediaElement.js中的Cortado Ogg播放器 - 幾乎可以工作

回答

相關問題