javascript - 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);
  }
});

现在我期望/想要的是一个简约的音频播放器，但我得到的是一个完整的视频播放器和媒体元素加载类“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);

...实际上是绑定(bind) mediaelementplayer()到您当前的 <a>标签，MEJS 将其配置为 video默认情况下，因为其中没有任何内容表明它是音频。

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

this.outerHTML = audioTag;

参见 jsfiddle

---

第二，在您最终替换 a 之后标记为 video标签，这个

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

... 仍然没有绑定(bind) mediaelementplayer()到 audio标记因为 $(this)引用一个不再存在的元素(<a> 标签)所以在这种情况下你应该这样做:

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

... 因为 video标签现在也共享 audio-player 类。

但是，请注意，如果您初始化 mediaelementplayer()在.each()里面方法，只有第一个元素会被正确初始化，因为它将是唯一的 audio用那个 class 标记。 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

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

---

第三，如果你的想法是audio元素应该在点击相应的链接后显示(而不是像上面的例子那样在页面加载时显示)，然后你必须绑定(bind)一个 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