#MediaElement.js Playlist Plugin for the Video and Audio Tag
##Intro
This MediaElement.js plugin provides playlist support for Video and Audio players. Previous forks (from newest to oldest):
- rocco/mediaelement-playlist-plugin
- duozersk/mep-feature-playlist
- duozersk/mep-feature-playlist
##tl;dr
- Add an attribute "data-showplaylist" with value "true" to video/audio tag to show playlist on start
- Add several <source>s to your <video> or <audio> tags (only playable types will be playlisted)
- Add features "playlistfeature" (loads library) and "playlist" (shows control icon) to .mediaelementplayer()
##How To
-
Download MediaElement.js
-
Download MediaElement Playlist Plugin (this repo)
-
Include these files in your HTML
- mediaelement-playlist-plugin.min.css
- mediaelement-playlist-plugin.min.js
- mediaelement-and-player.js
- mediaelementplayer.min.css
-
Add video / audio and source tags like this in your HTML
<video data-showplaylist="true" width="530" height="300" poster="poster.png" > <!-- Track 1 as .webm and .mp4 --> <source src="track1.webm" type="video/webm" title="Track 1" data-poster="track1.png"> <source src="track1.mp4" type="video/mp4" title="Track 1" data-poster="track1.png"> <!-- Track 1 as .webm and .mp4 --> <source src="track2.webm" type="video/webm" title="Track 2" data-poster="track2.png"> <source src="track2.mp4" type="video/mp4" title="Track 2" data-poster="track2.png"> <!-- Track 1 as .webm and .mp4 --> <source src="track3.webm" type="video/webm" title="Track 3" data-poster="track3.png"> <source src="track3.mp4" type="video/mp4" title="Track 3" data-poster="track3.png"> <!-- image fallback only - flash version does not support playlists --> <img src="no-video-playlist.png" title="No video playlist capabilities."> </video> <audio class="mep-slider" data-showplaylist="true" width="400" height="260" > <source src="track1.mp3" title="Track 1" data-poster="track1.png" type="audio/mpeg"> <source src="track2.mp3" title="Track 2" data-poster="track2.png" type="audio/mpeg"> <source src="track3.mp3" title="Track 3" data-poster="track3.png" type="audio/mpeg"> <source src="track4.mp3" title="Track 4" data-poster="track4.png" type="audio/mpeg"> </audio>
Add a CSS class
mep-slider
to video- or audio tags if you want slider display. The attributedata-showplaylist="true"
shows the playlist initially. Title attribute will be used as track name, falls back to file name. -
Add something similar to this JavaScript code to your page
<script> // video playlist $('video.mep-playlist').mediaelementplayer({ "features": ['playlistfeature', 'prevtrack', 'playpause', 'nexttrack', 'loop', 'shuffle', 'current', 'progress', 'duration', 'volume', 'playlist', 'fullscreen'], "shuffle": false, "loop": false }); // audio playlist $('audio.mep-playlist').mediaelementplayer({ "features": ['playlistfeature', 'prevtrack', 'playpause', 'nexttrack', 'loop', 'shuffle', 'current', 'progress', 'duration', 'volume', 'playlist'], "audioVolume": "vertical", // just like video player "shuffle": false, "loop": false }); // regular video $('video:not(.mep-playlist)').mediaelementplayer({ "features": ['playpause', 'current', 'progress', 'duration', 'tracks', 'volume', 'fullscreen'], }); </script>
.mediaelementplayer() Options:
- loop - loop through the playlist; defaults to 'false'
- shuffle - shuffle playlist; defaults to 'false'
.mediaelementplayer() Features:
- playlistfeature - loads the plugin, needed if you want playlists
- 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
##Main features
- Regular playlist or slider display
- Playlists are customizable via CSS/Sass
- Grunt, Sass, JSHinted source
##Build it yourself and contribute
- make sure you
$ npm install
before you run$ grunt
, sass is required too ($ gem install sass
) $ grunt build:dev
stores a debuggable demo in build/$ grunt build
stores a minified demo in build/- have a look at the demo.html files for a demo
- run
$ grunt watch
or just$ grunt
to work on the source efficiently - open/live-reload demo.html in browser