ProgressionPlayer - Responsive Audio/Video Player

Options


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!