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

您应该在代码中考虑一些细微的细节

第一次，这个：

$(this).outerHTML = audioTag;

...永远不会有效（请参阅 jsfiddle ），因为$(this)是指jQuery 对象，而不是对象

因此，<audio>代码永远不会替换<a>代码，因此

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

...实际上是mediaelementplayer()绑定到您当前的<a>标记，MEJS默认将其配置为video，因为其中没有任何内容可以告诉它是一个音频。

在这种情况下，你应该这样做：

this.outerHTML = audioTag;

参见 jsfiddle

SECOND ，在您最终用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()，则只会正确初始化第一个元素，因为它将是唯一的{{1}带有类的标签。在第一个循环中， class audio的其余元素仍然是audio-player标记（并且您将回到原始问题）

作为解决方法，您有两种选择：

将<a>方法保留在mediaelementplayer()方法中但是为新的.each()标记添加不同的类，例如：
```
video
```
...然后，将它们初始化为：
```
audioTag = '<audio class="audio-player'+index+'">'
```
保持代码的方式，只需在$(".audio-player"+index+"").addClass('mediaplayer-processed').mediaelementplayer(config_me);方法之后移动mediaelementplayer()方法，如：
```
.each()
```

注意以上任一配置都会在页面加载时将所有$(audioDiv).each(function (index) { if() {... } }); $(".audio-player").addClass('mediaplayer-processed').mediaelementplayer(config_me);代码转换为a代码。

这是您使用第二个选项

audio

参见 jsfiddle

注意我在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中设置了更高的width，因为您需要一些额外的空间来容纳卷处理程序。

THIRD ，如果您的想法是在点击相应的链接后显示config_me.audioWidth = 120;元素（而不是如上例所示的页面加载），那么您必须绑定一个使用audio方法内部 click方法的.on()事件。

注意，在这种情况下，建议在每个.each()标记中添加不同的类（如上面的选项1所示），以便我们初始化它们在每个audio之后单独进行

click

参见 jsfiddle

Mediaelement将视频播放器加载到音频标签中

1 个答案: