html5-skin

An open-source HTML5 UI skin based on React.js that overlays Ooyala V4 core player. This README contains introduction, setup and customization sections.

High Level Overview

html5-skin is a JS file that is made available externally to Ooyala core V4 player. It accepts and triggers general Ooyala Message Bus events from and to core player to change the behavior of video playback. All static files necessary to create and run video playback are hosted and can be accessed publicly. This skin repo are available to be git cloned or forked and be modified by developers (terms and condition apply).

Plug and Play capability

core.js is a lightweight core player that enables basic video playback functionality and provides Message Bus environment. Most of additional capabilities such as ads, discovery and skin are separated from core player JS. You may want to load additional plugins.

Examples

We have a sample HTML page ready for you. Check out sample page

This simple test HTML page can also be hosted on your environment to showcase html5 skin.

<!DOCTYPE html>
<html>
<head>
  <!-- V4 JS core and at least one video plugin is required. Plugins such as skin, discovery and Advertising need to be loaded separately -->
  <script src="//player.ooyala.com/static/v4/stable/4.9.8/core.min.js"></script>
  <script src="//player.ooyala.com/static/v4/stable/4.9.8/video-plugin/main_html5.min.js"></script>
  <script src="//player.ooyala.com/static/v4/stable/4.9.8/video-plugin/osmf_flash.min.js"></script>
  <script src="//player.ooyala.com/static/v4/stable/4.9.8/video-plugin/bit_wrapper.min.js"></script>
  <!-- Change these html5-skin.min.css and html5-skin.min.js to your local build if necessary -->
  <script src="//player.ooyala.com/static/v4/stable/4.9.8/skin-plugin/html5-skin.min.js"></script>
  <link rel="stylesheet" href="//player.ooyala.com/static/v4/stable/4.9.8/skin-plugin/html5-skin.min.css"/>
</head>

<body>
<div id='container'></div>
<script>
  var playerParam = {
    "pcode": "YOUR_PCODE",
    "playerBrandingId": "YOUR_PLAYER_ID",
    "debug":true,
    "skin": {
      // Config contains the configuration setting for player skin. Change to your local config when necessary.
      "config": "//player.ooyala.com/static/v4/stable/4.9.8/skin-plugin/skin.json"
    }
  };

  OO.ready(function() {
    window.pp = OO.Player.create('container', 'RmZW4zcDo6KqkTIhn1LnowEZyUYn5Tb2', playerParam);
  });
</script>

</body>
</html>

Developer Setup

Install git
[Install Node.js] (https://nodejs.org/download/release/v0.10.33/) v0.10.33
Install gulp globally by running: npm install --global gulp-cli
Clone project: git clone https://github.com/ooyala/html5-skin.git
After cloning, just cd in there, install dependencies by running npm install
This project also makes use of git submodule for the config directory. This needs to be initialized using git submodule commands:
```
    git submodule init
    git submodule update
    git pull
```
The init and update should only need to be run once, afterward git pull will update the submodule as well as the parent repo.
Build the project by running: gulp

This will perform an initial build and start a watch that will update the build/ folder with any changes made in js/ or scss/ folders.

Once the app is built a webserver will start and serve sample.html in your browser http://0.0.0.0:4444/.

Style

We use Sass (SCSS) for CSS preprocessor.

Our 4-1 architecture pattern splits the Sass codebase over several files that are compiled into a single, minified stylesheet deployed to production.

This approach maintains modular, decoupled style without impacting performance.

scss/
|
|– base/
|   |– _normalize.scss   # makes browsers render elements more consistently
|   |– _reset.scss       # resets to common HTML elements, Adds additional rules on top of _normalize.scss
|   |– _variables.scss   # variables, colors, measurements, flags to enable/disable features
|   |– _base.scss        # boilerplate, app level styles
|   |– _type.scss        # typography rules, fonts, icons
|   ...
|
|– components/           # style to correspond to app views and components
|   |– _buttons.scss
|   |– _forms.scss
|   |– _[screen].scss
|   |– _[component].scss
|   ...
|
|– mixins/               # Sass tools and helpers used across project
|   |– _mixins.scss      # groups of reusable CSS functions
|   ...
|
|– skins/
|   |– _default.scss     # default skin, values pulled from /skin-plugin/config/skin.json
|   |– _alien.scss       # :alien: skin
|   ...
|
|
`– html5-skin.scss       # main Sass file

Testing

To run tests, run this command:

npm test

Add test files to directory tests/.

Test file should have same location and name as js/ file with -test after test file name.

For example, component file js/components/sharePanel.js will have test file tests/components/sharePanel-test.js.

Customization

Relative Paths

Note that some necessary files are located with relative paths. Please verify that those files are properly placed in your web application. This includes:

localization files
asset files

Simple Customization

Simple customization can be achieved by modifying skin.json settings. Furthermore, you are able to override skin setting during player create time. The example below hides description text and render playButton blue on start screen.

var playerParam = {
  "skin": {
    "config": "//player.ooyala.com/static/v4/stable/4.9.8/skin-plugin/skin.json",
    "inline": {
      "startScreen": {"showDescription": false, "playIconStyle": {"color": "blue"}}
    }
  }
};

Advanced Customization

Advanced customization is readily available by modifying JS files. Follow Developer Setup section to create a local repository and to run build script. Built files are available inside build folder. You are welcomed to host your built skin javascript to be run with your player.

jonathanwilner/html5-skin