Mediaelement将视频播放器加载到音频标签中 [英] Mediaelement loads video player in an audio tag

问题描述

我正在使用JavaScript代码使用medialement.js加载到mp3的链接

I'm using a javascript code to load links to mp3 using medialement.js

配置如下:

HTML

<a class="audio-player" href="some.mp3">This mp3 is cool</a>

JavaScript:

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"类来加载媒体元素.

Now what I would expect/want is a minimalistic audio player, but what I get is a full video player and mediaelement loads with the class "mejs-video" instead "mejs-audio".

我尝试在config_me中强制使用该类型，但它仍作为视频加载.

I tried forcing the type in config_me, but it is still loaded as a video.

我错过了什么吗?我正在使用中介元素2.15.2.

Am I missing something? I'm using mediaelement 2.15.2.

推荐答案

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

There are some subtle details you should consider in your code

第一，这是

$(this).outerHTML = audioTag;

...将永远无法工作(请参见 jsfiddle )，因为$(this)是指jQuery object ，而不是文档 object .

... will never work (see jsfiddle) because $(this) refers to a jQuery object, not to a document object.

因此，<audio>标记永远不会替换<a>标记，所以

Because of that, the <audio> tag never replaces the <a> tag, so

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

...实际上是将mediaelementplayer()绑定到当前的<a>标记，并且MEJS默认将其配置为video，因为其中没有任何内容可以说明是音频.

... is actually binding mediaelementplayer() to your current <a> tag, and MEJS configures it as video by default because there is nothing in there that tells it's an audio.

在这种情况下，您应该执行以下操作:

In that case, you should do :

this.outerHTML = audioTag;

请参见 jsfiddle

See jsfiddle

第二，最终将a标记替换为video标记后，此

SECOND, after you finally replace the a tag with the video tag, this

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

...仍然不会将mediaelementplayer()绑定到audio标记，因为$(this)引用的元素不再存在(<a>标记)，因此在这种情况下，您应该执行以下操作:/p>

... still doesn't bind mediaelementplayer() to the audio tag because $(this) refers to an element that doesn't exist anymore (the <a> tag) so in that case you should do :

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

...，因为video标记现在还共享了audio-player class .

... because the video tag now also shares the audio-player class.

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

Please notice however, that if you initialize mediaelementplayer() inside the .each() method, only the first element will be correctly initialized because it will be the only one audio tag with that class. The rest of the elements with class audio-player are still <a> tags during the first loop (and you will be back to your original problem)

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

As a workaround, you have two options :

1. 将mediaelementplayer()方法留在.each()方法内，但是将不同的类添加到新的video标签中，例如:

1. Leave the mediaelementplayer() method inside the .each() method BUT add different classes to your new video tags like :

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

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

... then, initialize them like :

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

按原样保留代码，但只需将mediaelementplayer()方法移到.each()方法之后即可:

Leave your code the way it is but just move the mediaelementplayer() method after the .each() method like :

$(audioDiv).each(function (index) { 
    if() {... }
});
$(".audio-player").addClass('mediaplayer-processed').mediaelementplayer(config_me);

注意，以上两种配置均会在页面加载时将所有a标签转换为audio标签.

NOTICE either of the configurations above will convert ALL a tags into audio tags on page load.

这是您使用第二个选项的完整工作代码

Here is your complete working code with the second option

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

See jsfiddle

通知，我在config_me.audioWidth = 120;中设置了较高的width，因为您将需要一些额外的空间来容纳音量处理程序.

Notice I set a higher width in config_me.audioWidth = 120; because you will need some extra room for the volume handler.

THIRD ，如果您的想法是单击相应的链接后应显示audio元素(而不是如上例所示的页面加载)，则必须绑定使用.on()方法内部 .each()方法的事件.

THIRD, if your idea is that audio elements should be shown after clicking the corresponding link (and not on page load as in the example above), then you have to bind a click event using the .on() method inside the .each() method.

注意，在这种情况下，建议为每个audio标签添加一个不同的 class (如上面的选项1)，以便我们可以在之后分别初始化它们每个click如此

Notice that in this case, it's advisable to add a different class to each audio tag (as in option 1 above) so we can initialize them individually after each click so

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

See jsfiddle

这篇关于Mediaelement将视频播放器加载到音频标签中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！