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
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!