html5-player-ecosystem v1.0.0

EMPHtml5Player

Starting development

To develop on the EmpHtml5Player you'll need to build your own copy of the player. To build the code there are a few requirements

• Node.js -- We use Node for build and test automation. Download and install Node.js

• grunt-cli

Unix-based systems

sudo npm install -g grunt-cli

Windows

npm install -g grunt-cli

To develop on the SDK, after cloning the repository you need to install the node.js modules using the node package manager

cd sdk
npm install

to build a local copy of the player, and runtests

grunt dist
grunt test

to generate jsdoc documentation (generated in sdk/docs)

grunt jsdoc

to run the reference player

grunt copy:ref

then deploy the reference directory in any webserver and enjoy!

Testing

We use Karma; installed as a grunt plugin to run QUnit tests in real browsers, instead of running tests in phantomjs (a headless browser). To execute tests simply run the grunt command

grunt karma:dev

Grunt commands

Several grunt tasks are available for testing, development and distribution

grunt

Executes the grunt test command

grunt test

Builds the source and runs tests using Karma

grunt dev

builds the code and creates a local testing environment (on http://localhost:9999). Also watches the source code for any changes in /src and rebuilds when a change occurs

grunt watchAll

builds the code and creates a local testing environment (on http://localhost:9999). Also watches the source code for any changes in /src and /test and rebuilds when a change occurs

grunt dist

Creates packages available for distribution. in the /dist folder zipped archives can be found of the sdk, and the fully working reference player. In addition to sources file ready for distribution. The zip file for the reference player is automatically included in the /reference application

Several simple grunt tasks are also available for use in specific cases

grunt jshint #ensures code is compliant with coding standards and warns for any coding issues
grunt jsdoc #creates documentation based on source code comments
grunt uglify #uglifys and minifys source
grunt connect #setup local testing environment (on http://localhost:9999).
grunt karma #runs karma tests
grunt zip #creates a zip for distribution of the source
grunt copy #possible variations: build, swf, dist, ref. ref copies all the required files to the reference player
grunt compress #creates a tarball for distribution or reference player

About the code

Javascript for the EmpHtml5Player will be written using the new ES6 standard. Using grunt tasks this is then re-written to the ES5 standard where available. To learn more about Es6 see babel. To keep our code clean and separated, we uses Browserify. This allows us to use require statements to import javascript code from other files.

All of the above is done automatically using the grunt build system, but during development one should be aware of the power, and the limitations of both systems.

VideoJS

VideoJS is an HTML5 video player that we use as a base to create our own player. VideoJS provides us with many common tasks required for modern video players. Including but not limited to

• Video events (such as play, pause, timeupdate)
• Language support
• Plugin support
• Playback Tech support

As such it is encouraged to re-use as much as possible from the VideoJS library. A 5.4.3 or higher version of VideoJS is included in the npm packages. For more information about VideoJS

• github
• documentation
• Homepage

Docker

If you have docker installed then you don't need to install nodejs and grunt; and instead use a pre-built docker image to build the project!

Build

Step 1: Create a container

sudo docker run --name html5-player-build-container -d -v <PROJECT_ROOT_DIRECTORY>:/home/stakater -p 9000:9000 -t stakater/nodejs:only

<PROJECT_ROOT_DIRECTORY>: Please specify path to your root directory containing the player.

Step 2: Get into container

sudo docker exec -i -t html5-player-build-container bash

Then follow the commands given above.

Run

If you don't want to install all the dependencies and just run the player locally; then all you need is docker; and then rest will be piece of cake.

Step 1: create an image; which will contian nginx and the player!

sudo docker build -t emp-html5-player-image .

Step 2: create a container

sudo docker run --name emp-html5-player-container -p 32000:80 -p 33000:443 -d emp-html5-player-image

Step 3: hit the browser & enjoy!

• EMP Player