javascript - Mediaelement loads video player in an audio tag -

javascript - Mediaelement loads video player in an audio tag -

i'm using javascript code load links mp3 using medialement.js

the configuration follows:

html

<a class="audio-player" href="some.mp3">this mp3 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 , silverlight resize content size enableautosize: true, // order of controls want on command bar (and other plugins below) features: ['playpause','volume'], // hide controls when playing , mouse not on video alwaysshowcontrols: true, }; // need set video height , width because displayed 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); } });

now expect/want minimalistic sound player, total video player , mediaelement loads class "mejs-video" instead "mejs-audio".

i tried forcing type in config_me, still loaded video.

am missing something? i'm using mediaelement 2.15.2.

there subtle details should consider in code

first, :

$(this).outerhtml = audiotag;

... never work (see jsfiddle) because $(this) refers jquery object, not document object.

because of that, <audio> tag never replaces <a> tag, so

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

... binding mediaelementplayer() current <a> tag, , mejs configures video default because there nil in there tells it's audio.

in case, should :

this.outerhtml = audiotag;

see jsfiddle

second, after replace a tag video tag, this

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

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

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

... because video tag shares audio-player class.

please notice however, if initialize mediaelementplayer() within .each() method, first element correctly initialized because 1 audio tag class. rest of elements class audio-player still <a> tags during first loop (and original problem)

as workaround, have 2 options :

leave mediaelementplayer() method within .each() method add together different classes new video tags :

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

... then, initialize them :

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

leave code way move mediaelementplayer() method after .each() method :

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

notice either of configurations above convert a tags audio tags on page load.

here finish working code sec 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

see jsfiddle

notice set higher width in config_me.audiowidth = 120; because need room volume handler.

third, if thought audio elements should shown after clicking corresponding link (and not on page load in illustration above), have bind click event using .on() method inside .each() method.

notice in case, it's advisable add together different class each audio tag (as in alternative 1 above) 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); } homecoming false; }); // on }); // each }); // ready

see jsfiddle

javascript jquery html5 audio mediaelement.js