Added TOC on each section to standardize documentation

mediaelement · Sep 1, 2016 · 4f06243 · 4f06243
1 parent dc8a0f6
commit 4f06243
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 10 deletions.
diff --git a/api.md b/api.md
@@ -1,7 +1,18 @@
 # API and Configuration
 
+* [Configuration](#development)
+    * [Standalone](#standalone)
+    * [MediaElementPlayer](#player)
+* [API](#api)
+    * [Properties](#properties)
+    * [Methods](#methods)
+    * [Events](#events)
+
+
+<a id="configuration"></a>
 ## Configuration
 
+<a id="standalone"></a>
 ### Standalone
 
 As a standalone library, _MediaElement.js_ can be configured using the following settings.
@@ -57,6 +68,7 @@ success: function (mediaElement, domObject) { },
 error: function () { }
 ```
 
+<a id="player"></a>
 ### MediaElementPlayer
 
 Including the above, `MediaElementPlayer` object allows the following extra configuration elements.
@@ -195,13 +207,16 @@ fullscreenText: mejs.i18n.t('Fullscreen'),
 skipBackText: mejs.i18n.t('Skip back %1 seconds'), // %1 will be replaced with skipBackInterval in this string
 ```
 
+<a id="api"></a>
 ## API
 
 MediaElementPlayer is a complete audio and video player, but you can also use just the MediaElement object which replaces `<video>` and `<audio>` with a Flash player that mimics the properties, methods, and events of HTML MediaElement API.
 
+<a id="properties"></a>
 ### Properties
 All properties are listed in https://www.w3.org/2010/05/video/mediaevents.html; they can be accessed through an instance of player as described [here](usage.md).
 
+<a id="methods"></a>
 ### Methods
 
 Method | Description
@@ -214,6 +229,7 @@ remove() | Destroy the video/audio player instance
 
 **Note:** ```canPlayType()``` method is used internally and accounts for other types of media to be played (such as HLS, RTMP, etc.); ```addTextTrack()``` is replaced also with more code to manage clsoed captioning and tracks. For that reason, they are not listed.
 
+<a id="events"></a>
 ### Events
 
 Event | Action(s) executed when...

diff --git a/guidelines.md b/guidelines.md
@@ -5,7 +5,8 @@
 * [Flex SDK](#flex)
 * [Building](#building)
 
-## Development <a id="development"></a>
+<a id="development"></a>
+## Development
 
 Unless you are developing a fix for a reported issue, the development of a new feature follows specific conventions.
 
@@ -67,13 +68,15 @@ $(document).ready(function() {
 </script>
 ```
 
-## Node.js <a id="nodejs"></a>
+<a id="nodejs"></a>
+## Node.js
 
 Since `MediaElement.js` uses [Grunt](http://gruntjs.com/) 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 <a id="flex"></a>
+<a id="flex"></a>
+## 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.
 
@@ -83,7 +86,8 @@ One of the subtasks involved during the compiling of `MediaElement.js` is the co
 3. Create a symlink from the install location to this directory (eg: ```ln -s /usr/local/flex_sdk_4.6 /path/to/mediaelement/src/flash```)
 4. 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 <a id="building"></a>
+<a id="building"></a>
+## Building
 
 To compile ALL the files, just type `grunt` in the root of the project. 
 

diff --git a/installation.md b/installation.md
@@ -1,5 +1,14 @@
 # Installation
 
+* [0. Setup MIME-types](#mime-types)
+* [1. Add Script and Stylesheet](#script-and-stylesheet)
+* [2. Add `<video>` or `<audio>` tags](#tags)
+    * [Multiple codecs (Optional)](#multi-codecs)
+    * [Browsers with JavaScript disabled (Optional)](#disabled-javascript)
+    * [Use of Closed Captioning (Optional)](#closed-captioning)
+
+
+<a id="mime-types"></a>
 ## 0. Setup MIME-types (optional)
 On Linux/Apache servers, create a filed called .htaccess with the following text and upload it to the root of your website
 ```
@@ -13,6 +22,7 @@ If you are working with local files and plan to test Flash playback, make sure y
 
 For more information about how to set up a server to serve media properly and other general and useful topics about dealing with HTML5 video, [this article](http://ronallo.com/blog/html5-video-everything-i-needed-to-know) is a good start point.
 
+<a id="script-and-stylesheet"></a>
 ## 1. Add Script and Stylesheet
 ```html
 <script src="jquery.js"></script>
@@ -64,6 +74,7 @@ If you wish to install the sources in different directories (i.e., all Javascrip
 
 Also, update ```pluginPath``` within the configuration options (visit [Usage and Tips](usage.md) and [API and Configuration](api.md) for more details) with the location of the Flash/Silverlight files to make _shim_ mode to work. Also, update ```flashName``` and ```silverlightName``` configuration options **only if those files were renamed**.
 
+<a id="tags"></a>
 ## 2. Add `<video>` or `<audio>` tags
 If your users have JavaScript and/or Flash, the easiest route for all browsers and mobile devices is to use a single MP4 or MP3 file.
 
@@ -74,7 +85,8 @@ If your users have JavaScript and/or Flash, the easiest route for all browsers a
 <audio src="myaudio.mp3"></audio>
 ```
 
-### Optional: multiple codecs
+<a id="multi-codecs"></a>
+### Multiple codecs (Optional)
 This includes multiple codecs for various browsers (H.264 for IE9+, Safari, and Chrome, WebM for Firefox 4 and Opera, Ogg for Firefox 3).
 
 ```html
@@ -85,7 +97,8 @@ This includes multiple codecs for various browsers (H.264 for IE9+, Safari, and
 </video>
 ```
 
-### Optional: Browsers with JavaScript disabled
+<a id="disabled-javascript"></a>
+### Browsers with JavaScript disabled (Optional)
 In very rare cases, you might have a non-HTML5 browser with Flash turned on and JavaScript turned off. In that specific case, you can also include the Flash `<object>` code.
 ```html
 <video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">
@@ -100,8 +113,8 @@ In very rare cases, you might have a non-HTML5 browser with Flash turned on and
 </video>
 ```
 
-
-### Optional: Use of Closed Captioning
+<a id="closed-captioning"></a>
+### Use of Closed Captioning (Optional)
 
 The way to setup closed captioning is by using the `track` tag as follows:
 ```html

diff --git a/usage.md b/usage.md
@@ -1,7 +1,12 @@
 # Usage
 
+* [Automatic start](#automatic)
+* [Vanilla JavaScript](#vanilla)
+* [jQuery](#jquery)
+
 You can use this as a standalone library if you wish, or just stick with the full MediaElementPlayer.
 
+<a id="automatic"></a>
 ## Automatic start
 You can avoid running any startup scripts by added `class="mejs-player"` to the `<video>` or `<audio>` tag. Options can be added using the `data-mejsoptions` attribute.
 ```html	
@@ -10,7 +15,8 @@ You can avoid running any startup scripts by added `class="mejs-player"` to the
 		data-mejsoptions='{"alwaysShowControls": true}'></video>
 ```
 
-## Normal JavaScript
+<a id="vanilla"></a>
+## Vanilla JavaScript
 ```html
 <script>
 var player = new MediaElementPlayer('#player', {success: function(mediaElement, originalNode) {
@@ -19,7 +25,8 @@ var player = new MediaElementPlayer('#player', {success: function(mediaElement,
 </script>	
 ```
 
-## Through jQuery plugin
+<a id="jquery"></a>
+## jQuery
 ```html
 <script>
 $('#mediaplayer').mediaelementplayer({success: function(mediaElement, originalNode) {