Skip to content

guidelines.md

Latest commit

 

History

History
107 lines (77 loc) · 4.98 KB

guidelines.md

File metadata and controls

107 lines (77 loc) · 4.98 KB

Guidelines for Contributors

Development

Unless you are developing a fix for a reported issue, the development of a new feature follows specific conventions.

  • Tab size is 8 for indentation.
  • File name format: mep-feature-[feature_name].js.
  • ALWAYS make changes to the files in the /src/ directory, and NEVER in /build/ directory. This is with the sole purpose of facilitating the merging (and further, the compiling) operation, and help people to see changes more easily.
  • Test the changes with /test/test.html. Make sure you download the media files from https://github.com/johndyer/mediaelement-files and place them inside the /media/ directory.
  • A code template to build a feature is presented below.
(function($) {

	$.extend(mejs.MepDefaults, {
		// Any variable that can be configured by the end user belongs here.
		// Make sure is unique by checking API and Configuration file.
		// Add comments about the nature of each of these variables.
	});

	
	$.extend(MediaElementPlayer.prototype, {
	
	    // Public variables
	
		build[feature_name]: function(player, controls, layers, media) {
		    // This allows us to access options and other useful elements already set.
		    // Adding variables to the object is a good idea if you plan to reuse 
		    // those variables in further operations.
			var t = this;

            // All code required inside here to keep it private;
            // otherwise, you can create more methods or add variables
            // outside of this scope
		}
		
		// Public methods
	});
	
})(mejs.$);

If the feature must be integrated in the core package, place it inside /src/ folder to be reviewed and, if code integrates any configuration variables, make sure you also write comments about their purpose, and add them into API and Configuration to keep documentation up-to-date; otherwise, to use it immediately, just call it after the main files and add its name in the features configuration.

<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<script src="mejs-feature-[feature_name].js"></script>

<video id="player1" width="320" height="240"></video>

<script>
$(document).ready(function() {
 
    // create player
    $('#player1').mediaelementplayer({
        // add desired features in order
        features: ['playpause','[feature_name]','current','progress','duration','volume']
    });
});
</script>

Node.js

Since MediaElement.js uses Grunt to compile it, Node.js is required. Download it at https://nodejs.org/ and follow the steps to install it, or install node.js with npm.

Once installed, at the command prompt, type npm install, which will download all the necessary tools.

Flex SDK

One of the subtasks involved during the compiling of MediaElement.js is the compiling of the Flash files. In order to do it, Flex SDK needs to be installed.

  1. Make sure your version of Java is 1.5 or later since Flex compilers are 32-bit executables and cannot launch 64-bit processes; otherwise, you will receive the error This Java instance does not support a 32-bit JVM.Please install the desired version. For more information about this topic, read Adobe's JVM Configuration.
  2. Download the free Flex SDK from http://sourceforge.net/adobe/flexsdk/wiki/Download%20Flex%204.6/
  3. Unzip it to a directory on your local machine (eg: /usr/local/flex_sdk_4.6)
  4. Create a symlink from the install location to this directory (eg: ln -s /usr/local/flex_sdk_4.6 /path/to/mediaelement/src/flash)
  5. If you do not have the required player global swc file (version 10.1), download it from https://helpx.adobe.com/flash-player/kb/archived-flash-player-versions.html and place it inside /path/to/flex_sdk_4.6/frameworks/libs/player/10.1/playerglobal.swc

Building

To compile ALL the files, in your Terminal window just type grunt in the root of the project.

If during the development wasn't necessary to do any changes to the Flash files, type grunt html5only. That way, the Flash files will remain intact. You can also type grunt debug_html5 to avoid removing the console messages.

If, on the other hand, only the ActionScript files were affected, type sh compile_swf.sh and it will build the compiled files in /local-build/ directory. Then just copy the files and put them inside /build/ directory.

Finally, if changes were done to the FlashMediaElement.fla file:

  1. Open it in the Flash Professional IDE.
  2. Go to the menu item File->Publish Settings
  3. Click the Flash tab
  4. Make sure the box Export SWC is checked
  5. Click Publish

Back to Main