Question

I’m trying to setup a player using mediaelement.js.
I’m implementing my own custom playlist – I want only one player on the page, and on clicking different titles in the playlist, it has to automatically change the source of the player.

I’ve achieved this with fairly simple code.

Here’s the initialization:

var player = new MediaElementPlayer("#audioplayer",
{
//if the <video width> is not specified, this is the default
defaultVideoWidth: 480,
// if the <video height> is not specified, this is the default
defaultVideoHeight: 270,
// if set, overrides <video width>
videoWidth: -1,
// if set, overrides <video height>
videoHeight: -1,
// width of audio player
audioWidth: 960,
// height of audio player
audioHeight: 30,
// initial volume when the player starts
startVolume: 0.8,
// useful for <audio> player loops
loop: false,
// 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','progress','current','duration','tracks','volume','fullscreen'],

// automatically selects a <track> element
startLanguage: '',
// a list of languages to auto-translate via Google
translations: [],
// a dropdownlist of automatic translations
translationSelector: false,
// key for tranlsations
googleApiKey: '' }
);

This is the code to change the src, on clicking an element in the playlist.

document.getElementById('audioplayer').src = url;
  if(url.search('youtube')!=-1 || url.search('youtu.be')!=-1)
  {
    document.getElementById('audioplayer').pluginType="youtube";
    $('#audioplayer').attr("type","video/youtube");
  }
  else
  {
    document.getElementById('audioplayer').pluginType="native";
    $('#audioplayer').attr("type","audio/mp3");
  }
  player.load();
  player.play();

The issue is that the player cannot play both video and audio sources. I’ve tried changing all the parameters, including src, pluginType, etc. It either plays only the audio files, or the video files.

Can anyone help me with this? I’m guessing it has something to do with the initialization – as MediaElement, AudioElement, or VideoElement, etc.

Thanks in advance.

Answer 1

I finally just ended up using two players – initialized one as audio and other as video type. Hide one player when displaying the other and vice-versa. This is the simplest solution I could come up with.