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 object，而不是文档 object.

正因为如此，<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 类。

但请注意，如果您在.each() 方法中初始化mediaelementplayer()，则只有第一个元素会被正确初始化，因为它将是唯一一个带有类。 class audio-player 的其余元素在第一个循环期间仍然是 <a> 标记（您将回到原来的问题）

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

1. 将mediaelementplayer() 方法保留在.each() 方法中，但为您的新video 标签添加不同的类，例如：

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

   ...然后，像这样初始化它们：

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

2. 保持您的代码不变，但只需将 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

注意我在config_me.audioWidth = 120; 中设置了更高的width，因为您需要为音量处理程序提供一些额外空间。

---

第三，如果您的想法是在单击相应链接后应该显示audio 元素（而不是像上面的示例那样在页面加载时显示），那么您必须绑定一个@987654363 @事件使用.on()方法在.each()方法。

注意，在这种情况下，建议为每个 audio 标签添加一个不同的 class（如上面的选项 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