Mediaelementplayer.js | surprise 'skin' [solved] (and working 'ended' code)

JavaScript
1

I’ve been using this player for a long while in a basic way, looking llike this…

https://i.imgur.com/uzNe6rs.png

<audio id="player" controls preload="none">
	<source id="ogg" src="audio/mfv.ogg" type='audio/ogg; codecs="vorbis"'>
	<source id="mp3" src="audio/mfv.mp3" type='audio/mpeg; codecs="mp3"'>
	This browser doesn't support HTML5 audio
</audio>

I now want the “clip ended” functionality and with jQuery had to add…

$("#player").mediaelementplayer({
	success: function(mediaElement, originalNode, instance) {
		originalNode.addEventListener('ended', clipEnded, false);   // calls clipEnded()
	}
});

I had to use $(“#player”) here, as $(“audio”) for some reason doesn’t work.

Using this $(“#player”) code above, a video player skin is now appearing “out of the blue”…??

https://i.imgur.com/fkay0SJ.png

I have tried adding parameters in different places to control or change this, but I may be overlooking something very basic?

I just want my audio player look, but adding “ended” functionality.

Anyone know what might be happening here…?

TIA! :slight_smile:

2

Sorry…

Just noticed I had another piece of script in a different place.

<script>$('audio').mediaelementplayer({startVolume:0.8,pauseOtherPlayers: true, audioHeight:44});</script>

Integrating this in the new $(“#player”) code solved it [and $(‘audio’) now works and is sufficient too].

:relaxed:

(I would delete the thread to save people time, but can’t find that either :wink: )

1 Like
3

But you might not be the only person to run into this problem, and by posting your solution, you may have helped others.

4

It’s a bit too dumb really :stuck_out_tongue:

OTOH, it’s good to see the “ended” code, cause that took me forever too.

Most examples seemed to use it on player, media, etc;

It needed originalNode.addEventListener (‘ended’, … to finally work.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.