的MediaElement加載視頻播放器在音頻標籤

Question

我使用的是JavaScript代碼使用medialement.js

的配置如下加載鏈接MP3：

HTML

<a class="audio-player" href="some.mp3">This mp3 is cool</a> 

的Javascript ：

var audioDiv = document.getElementsByClassName("audio-player"); 
$(audioDiv).each(function(index) { 
    if ($(this).className != 'mediaplayer-processed') { 
    var playlist = $(this).attr('href'); 
    playlist = playlist.replace("%20", " "); 
    sourceType = playlist.split('.').pop().toLowerCase(); 
    if (sourceType == 'mp3') { 
     sourceType = 'mpeg'; 
    } 
    audioTag = '<audio class="audio-player">' 
    audioTag = audioTag + '<source type="audio/' + sourceType + '" src="' + playlist + '" />'; 
    audioTag = audioTag + '</audio>'; 
    $(this).outerHTML=audioTag; 
    config_me = { 
     // enables Flash and Silverlight to resize to content size 
     enableAutosize: true, 
     // the order of controls you want on the control bar (and other plugins below) 
     features: ['playpause','volume'], 
     // Hide controls when playing and mouse is not over the video 
     alwaysShowControls: true, 
    }; 
    // I need to set the video height and width because it is displayed as video 
    config_me.videoHeight = 30; 
    config_me.videoWidth = 60; 
    config_me.audioWidth = 60; 
    config_me.audioHeight = 30; 
    config_me.loop = false; 

    $(this).addClass('mediaplayer-processed').mediaelementplayer(config_me); 
    } 
}); 

現在我期望/想要的是一個簡約的音頻播放器，但我得到是一個完整的視頻播放器和mediaelement加載類「mejs-video」而不是「mejs-audio」。

我試着強制config_me中的類型，但它仍然作爲視頻加載。

我錯過了什麼嗎？我使用的是mediaelement 2.15.2。

Answer 1

有一些微妙的細節，你應該在你的代碼

FIRST考慮，這一點：

$(this).outerHTML = audioTag; 

...不會有任何效果（見jsfiddle），因爲$(this)是指一個jQuery 對象，而不是文件對象。

正因爲如此，在<audio>標籤永遠不能替代<a>標籤，所以

$(this).addClass('mediaplayer-processed').mediaelementplayer(config_me); 

...實際上是結合mediaelementplayer()到您當前<a>標籤，並MEJS其配置爲video默認情況下，因爲沒有什麼在那裏告訴它是一個音頻。

在這種情況下，你應該做的：

this.outerHTML = audioTag; 

見jsfiddle

---

第二，之後你終於更換a標籤與video標籤，這

$(this).addClass('mediaplayer-processed').mediaelementplayer(config_me); 

...還是不綁定mediaelementplayer()到audio標記，因爲$(this)是指不存​​在了（在<a>標籤）的元素，以便在這種情況下，你應該做的：

$(".audio-player").addClass('mediaplayer-processed').mediaelementplayer(config_me); 

.. 。因爲video標籤現在也共享audio-player類。

請通知但是，如果你初始化mediaelementplayer()的.each()方法中，只有第一個元素將被正確初始化，因爲它是唯一一個audio標籤與類。元素與audio-player類，其餘仍是第一循環中<a>標籤（你會回到你原來的問題）

作爲一種解決辦法，你有兩個選擇：

1. 離開該mediaelementplayer()方法.each()方法內，但不同類添加到您的新video標籤，如：

   audioTag = '<audio class="audio-player'+index+'">' 
   

   。 ..然後，初始化它們喜歡：

   $(".audio-player"+index+"").addClass('mediaplayer-processed').mediaelementplayer(config_me); 
   

2. 留下你的代碼事情是這樣的，但只是.each()方法等之後，移動mediaelementplayer()方法：

   $(audioDiv).each(function (index) { 
       if() {... } 
   }); 
   $(".audio-player").addClass('mediaplayer-processed').mediaelementplayer(config_me); 
   

注意任上述配置將在頁面加載時將ALL a標籤轉換爲audio標籤。

這裏是第二個選項的完整的工作代碼

jQuery(document).ready(function ($) { 
    var audioDiv = document.getElementsByClassName("audio-player"); 
    $(audioDiv).each(function (index) { 
     if ($(this).className != 'mediaplayer-processed') { 
      var playlist = $(this).attr('href'); 
      playlist = playlist.replace("%20", " "); 
      sourceType = playlist.split('.').pop().toLowerCase(); 
      console.log(sourceType); 
      if (sourceType == 'mp3') { 
       sourceType = 'mpeg'; 
      } 
      audioTag = '<audio class="audio-player">' 
      audioTag = audioTag + '<source type="audio/' + sourceType + '" src="' + playlist + '" />'; 
      audioTag = audioTag + '</audio>'; 
      // $(this).outerHTML = audioTag; 
      this.outerHTML = audioTag; 
      config_me = { 
       enableAutosize: true, 
       features: ['playpause', 'volume'], 
       alwaysShowControls: true, 
      }; 
      //config_me.videoHeight = 30; 
      //config_me.videoWidth = 60; 
      config_me.audioWidth = 120; 
      config_me.audioHeight = 30; 
      config_me.loop = false; 
     } 
    }); // each 
    $(".audio-player").addClass('mediaplayer-processed').mediaelementplayer(config_me); 
}); // ready 

見jsfiddle

注意我提出了更高的width在config_me.audioWidth = 120;因爲你需要爲卷處理一些額外的空間， 。

---

第三，如果你的想法是audio元素應該單擊相應的鏈接後顯示（而不是網頁上加載在上面的例子），那麼你必須綁定使用.on()一個click事件方法內.each()方法。

注意，在這種情況下，它的建議不同類添加到每個audio標籤（如在上面的選項1），因此我們可以在每個click所以

jQuery(document).ready(function ($) { 
    var audioDiv = document.getElementsByClassName("audio-player"); 
    $(audioDiv).each(function (index) { 
     $(this).on("click", function (e) { 
      if ($(this).className != 'mediaplayer-processed') { 
       var playlist = this.href; // $(this).attr('href'); 
       playlist = playlist.replace("%20", " "); 
       sourceType = playlist.split('.').pop().toLowerCase(); 
       console.log(sourceType); 
       if (sourceType == 'mp3') { 
        sourceType = 'mpeg'; 
       } 
       audioTag = '<audio class="audio-player'+index+'">' 
       audioTag = audioTag + '<source type="audio/' + sourceType + '" src="' + playlist + '" />'; 
       audioTag = audioTag + '</audio>'; 
       // $(this).outerHTML = audioTag; 
       this.outerHTML = audioTag; 
       config_me = { 
        enableAutosize: true, 
        features: ['playpause', 'volume'], 
        alwaysShowControls: true, 
       }; 
       //config_me.videoHeight = 30; 
       //config_me.videoWidth = 60; 
       config_me.audioWidth = 120; 
       config_me.audioHeight = 30; 
       config_me.loop = false; 
       $(".audio-player"+index+"").addClass('mediaplayer-processed').mediaelementplayer(config_me); 
      } 
      return false; 
     }); // on 
    }); // each 
}); // ready 

後看到單獨對它們進行初始化jsfiddle