Permalink
Browse files

Added TOC on each section to standardize documentation

  • Loading branch information...
1 parent dc8a0f6 commit 4f0624311f51037facd72ce62d650eda46e49f14 @ron666 ron666 committed Sep 1, 2016
Showing with 50 additions and 10 deletions.
  1. +16 −0 api.md
  2. +8 −4 guidelines.md
  3. +17 −4 installation.md
  4. +9 −2 usage.md
View
@@ -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...
View
@@ -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.
View
@@ -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
View
@@ -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) {

0 comments on commit 4f06243

Please sign in to comment.