An open-source HTML5 UI skin based on React.js that overlays Ooyala V4 core player. This README contains introduction, setup and customization sections.
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).
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.
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.3.3/core.min.js"></script>
<script src="//player.ooyala.com/static/v4/stable/4.3.3/video-plugin/main_html5.min.js"></script>
<script src="//player.ooyala.com/static/v4/stable/4.3.3/video-plugin/osmf_flash.min.js"></script>
<script src="//player.ooyala.com/static/v4/stable/4.3.3/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.3.3/skin-plugin/html5-skin.min.js"></script>
<link rel="stylesheet" href="//player.ooyala.com/static/v4/stable/4.3.3/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.3.3/skin-plugin/skin.json"
}
};
OO.ready(function() {
window.pp = OO.Player.create('container', 'RmZW4zcDo6KqkTIhn1LnowEZyUYn5Tb2', playerParam);
});
</script>
</body>
</html>-
[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
cdin there, install dependencies by runningnpm 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 pullThe 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:
gulpThis will perform an initial build and start a watch that will update the
build/folder with any changes made injs/orscss/folders.Once the app is built a webserver will start and serve
sample.htmlin your browser http://0.0.0.0:4444/.
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
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.
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 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.3.3/skin-plugin/skin.json",
"inline": {
"startScreen": {"showDescription": false, "playIconStyle": {"color": "blue"}}
}
}
};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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent