ProgressionPlayer - Responsive Audio/Video Player

• Default Skin
• 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.

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

Step 1: Add Scripts and Stylesheet

	<script src="http://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!