empplayer2-dev

EMP Html5 Player 2

EMP HTML5 player is build on top of VideoJS 6

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. For more information about VideoJS

• github
• documentation
• Homepage

Table of Contents

• Development
• Quick Start
• Upgrade Guide
• Getting Started
• Release notes
• Hosted API docs

Development

A reference app that uses this package is available here;

• hosted player
• git
• API Docs

Starting development

As a developer you need to add custom ui-logic to the receiver-app and customize index.html file. 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 setup your project

npm install

Grunt commands

Some grunt tasks are available:

grunt

grunt dev

Builds the reference and demo player.

grunt dist

Builds the code and and places the final app in dist folder.

grunt deploy

An example on how to use ftp to send the app to a webserver. If the ftp server requires authentication, credentials should be placed in a file .ftpauth in the root of the project

About the code

Javascript for the Receiver 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.

Quick Start

Using EMP Player is as simple as creating a <video> element, but with an additional data-setup attribute. At a minimum, this attribute must have a value of '{}', but it can include any empPlayer options - just make sure it contains valid JSON!

<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
     <source src=https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8 type=application/x-mpegURL>
     <source src=http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4 type=video/mp4>
     <source src="https://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.mpd" type="application/dash+xm">
     <source src="npa2_qwerty" type="video/emp">
     <source src='{"channelId":"750837_qwerty"}' type="video/emp">
</video>

When the page loads, EMP Player will find this element and automatically setup a player in its place.

If you don't want to use automatic setup, you can leave off the data-setup attribute and initialize a <video> element manually using the empPlayer function:

var player = empPlayer('my-player');

The empPlayer function also accepts an options object and a callback to be invoked when the player is ready:

var options = {};

var player = empPlayer('my-player', options, function onPlayerReady() {
  empPlayer.log('Your player is ready!');

  // In this context, `this` is the player that was created by Video.js.
  this.play();

  // How about an event listener?
  this.on('ended', function() {
    empPlayer.log('Awww...over so soon?!');
  });
});

If you're ready to dive in, the Getting Started page and documentation are the best places to go for more information.