MediaElement.js playlists for video and audio tags
Clone or download
Pull request Compare This branch is 38 commits ahead, 3 commits behind rocco:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
demo
lib
src
.gitignore
.nojekyll
Gruntfile.js
README.md
demo.html
flashmediaelement.swf
index.html
package.json
params.json

README.md

#MediaElement.js Playlist Plugin for the Video and Audio Tag

>>> Here's a demo

##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

  1. Download MediaElement.js

  2. Download MediaElement Playlist Plugin (this repo)

  3. Include these files in your HTML

    • mediaelement-playlist-plugin.min.css
    • mediaelement-playlist-plugin.min.js
    • mediaelement-and-player.js
    • mediaelementplayer.min.css
  4. 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 attribute data-showplaylist="true" shows the playlist initially. Title attribute will be used as track name, falls back to file name.

  5. 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