的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