ProgressionPlayer - Responsive Audio/Video Player

• Default Skin
• MV Default
• Player Sizes
• Fancy Skin
• Dark Skin
• Minimal Dark Skin
• Minimal Light Skin
• Basic Usage

Options

• Responsive Audio/Video Player: Mobile, Tablet and Desktop optimized (Easily disable this option if necessary)
• Custom Flash and Silverlight players that mimic the HTML5 MediaElement API for older browsers
• 5 Skins to choose from
• Audio Playlists supported
• Unlimited players per page
• Retina Support: ProgressionPlayer is optimized for high resolution displays like the Macbook Pro with Retina Display, iPhones and iPads
• Players automatically stop playing when another player is activated
• Easy to Customize
• Full-screen video button
• Playlist can stay open or closed by default.

Player Options Via JavaScript

$('video').mediaelementplayer({
    defaultVideoWidth: 480, // if the <video width> is not specified, this is the default
    defaultVideoHeight: 270, // if the <video height> is not specified, this is the default
    videoWidth: -1, // if set, overrides <video width>
    videoHeight: -1, // if set, overrides <video height>
    audioWidth: 400, // width of audio player
    audioHeight: 30, // height of audio player
    startVolume: 0.8, // initial volume when the player starts
    loop: false, // useful for <audio> player loops
    enableAutosize: true, // enables Flash and Silverlight to resize to content size
    features: ['playpause','current','progress','duration','tracks','volume','fullscreen'], // the order of controls you want on the control bar (and other plugins below)
    alwaysShowControls: false,  // Hide controls when playing and mouse is not over the video
    iPadUseNativeControls: false,  // force iPad's native controls
    iPhoneUseNativeControls: false,  // force iPhone's native controls
    AndroidUseNativeControls: false, // force Android's native controls
    alwaysShowHours: false, // forces the hour marker (##:00:00)
    showTimecodeFrameCount: false, // show framecount in timecode (##:00:00:00)
    framesPerSecond: 25, // used when showTimecodeFrameCount is set to true
    enableKeyboard: true, // turns keyboard support on and off for this instance
    pauseOtherPlayers: true // when this player starts, it will pause other players
 
});

Installing the player is easy as 1, 2, 3!

Step 1: Add Scripts and Stylesheet

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><!-- jQuery Latest -->
	<script src="../build/mediaelement-and-player.min.js"></script><!-- Audio/Video Player jQuery -->
	<script src="../build/mep-feature-playlist.js"></script><!-- Playlist JavaSCript -->

	<link rel="stylesheet" href="../css/progression-player.css" /><!-- Default Player Styles -->
	<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /><!-- Player Icons -->	

Step 2: Add your video or audio files.

Video Example:

	<video  class="progression-single progression-skin" controls="controls" preload="none">
		<source src="../media/big_buck_bunny.mp4" type="video/mp4" title="mp4">
	</video>

Audio Example:

	<audio class="progression-single progression-skin progression-audio-player" controls="controls" preload="none">
		<source src="../media/indie-rock.mp3" type="audio/mp3"/>
	</audio>

Step 3: Start Player via JavaScript

The .progression-single call is what activates the audio/video.

	<script>
	$('.progression-single').mediaelementplayer({
		audioWidth: 400, // width of audio player
		audioHeight:40, // height of audio player
		startVolume: 0.5, // initial volume when the player starts
		features: ['playpause','current','progress','duration','tracks','volume','fullscreen']
		});
	</script>

And your done creating your player!