Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A playlist plugin for MediaElement.js

branch: master

This branch is 0 commits ahead and 0 commits behind master

Merge pull request #1 from jeremejazz/master

adds audioHeight parameter in instuctions
change in colors
adds demo page
latest commit 4fb530473b
Andrew Berezovsky authored
Octocat-spinner-32 README.md adds audioheight parameter in instuctions September 02, 2013
Octocat-spinner-32 controls-playlist.png Enhanced and rewritten version January 30, 2013
Octocat-spinner-32 demo.html adds demo page September 02, 2013
Octocat-spinner-32 mep-feature-playlist.css change in colors September 02, 2013
Octocat-spinner-32 mep-feature-playlist.js Minor changes to the internal functions. March 26, 2013
README.md

mep-feature-playlist - A playlist plugin for MediaElement.js

Demo

Usage:

1 - Download MediaElement.js

2 - Download mep-feature-playlist

3 - Include

  • mediaelement-and-player.js
  • mediaelementplayer.min.css
  • mep-feature-playlist.js
  • mep-feature-playlist.css

4 - Add this code to your page:

<script>
$(function(){
    $('audio,video').mediaelementplayer({
        loop: true,
        shuffle: true,
        playlist: true,
        audioHeight: 30,
        playlistposition: 'bottom',
        features: ['playlistfeature', 'prevtrack', 'playpause', 'nexttrack', 'loop', 'shuffle', 'playlist', 'current', 'progress', 'duration', 'volume'],
    });
});
</script>

Options:

  • loop - loop through the playlist; defaults to 'false'
  • shuffle - shuffle playlist; defaults to 'false'
  • playlist - controls either to show playlist by default or not; defaults to 'false'
  • playlistposition - can be either 'top' or 'bottom' to show playlist on top of the player or under it; defaults to 'top'

Features:

  • playlistfeature - general feature to enable playlist functionality; it just builds the internal playlist layer, it should be present if you want to use playlist
  • prevtrack - button to play the previous track in the playlist
  • nexttrack - button to play the next track in the playlist
  • loop - toggle to turn repeat on or off
  • shuffle - toggle to turn shuffle on or off
  • playlist - playlist button to show/hide playlist

5 - Add the audio tag and your tracks:

<audio controls="controls" autoplay="autoplay">
    <source src="media/AirReview-Landmarks-02-ChasingCorporate.mp3" title="Chasing Corporate" type="audio/mpeg"/>
    <source src="media/framing.mp3" title="Framing" type="audio/mpeg"/>
</audio>

It will use title attribute as track name, falls back to file name if no title is specified.

Screenshots

Playlist Collapsed

MediaElement.js Collapsed playlist

Playlist Expanded

MediaElement.js Expanded playlist

  • Yellow - playing track
  • Green - track to play on click

More options and installation instructions related to MediaElement.js can be found here.

Something went wrong with that request. Please try again.