/mediaelement-playlist-plugin

MediaElement.js playlists for video and audio tags

Primary LanguageJavaScript

#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