MediaElement的加载视频播放器在音频标签(Mediaelement loads video

我使用的是JavaScript代码加载链接使用MP3 medialement.js

的配置如下：

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视频”，而不是“MEJS音频”。

我试图迫使型config_me，但它仍然加载视频。

我缺少的东西吗？我使用的MediaElement 2.15.2。

有一些微妙的细节，你应该在你的代码考虑

首先，这：

$(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>第一循环中的标签（你会回到你原来的问题）

作为一种变通方法，你有两个选择：

离开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在页面加载标签。

这里是第二个选项的完整的工作代码

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内容应单击相应的链接后显示（而不是在页面加载在上面的例子），那么你必须绑定一个click使用事件.on() 里面的方法.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