Skip to content

Commit

Permalink
feat: ott player (#67)
Browse files Browse the repository at this point in the history
* Add kaltura ott player.
* Add docs.
* Split webpack to ott & ovp.
* Add types.
* Update samples.
  • Loading branch information
Dan Ziv authored Jan 10, 2018
1 parent a0e6cd3 commit c740a33
Show file tree
Hide file tree
Showing 47 changed files with 61,444 additions and 918 deletions.
3 changes: 2 additions & 1 deletion .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@
/dist
karma.conf.js
webpack.config.js

webpack.config.ovp.js
webpack.config.ott.js
4 changes: 4 additions & 0 deletions .flowconfig
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,7 @@ node_modules/playkit-js-ui/flow-typed/
node_modules/playkit-js-providers/flow-typed/
[options]
unsafe.enable_getters_and_setters=true
module.name_mapper='playkit-js-providers' -> 'playkit-js-providers/dist/playkit-ovp-provider'
module.name_mapper='playkit-js-providers' -> 'playkit-js-providers/dist/playkit-ott-provider'
module.name_mapper='player-defaults' -> '<PROJECT_ROOT>/src/ovp/player-defaults'
module.name_mapper='player-defaults' -> '<PROJECT_ROOT>/src/ott/player-defaults'
151 changes: 150 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,150 @@
# kaltura-player-js
# Kaltura Player JS Platform - OTT and OVP media players based on the [PlayKit JS Player]

[![Build Status](https://travis-ci.org/kaltura/kaltura-player-js.svg?branch=master)](https://travis-ci.org/kaltura/kaltura-player-js)

Kaltura Player JS is written in [ECMAScript6], statically analysed using [Flow] and transpiled in ECMAScript5 using [Babel].

[Flow]: https://flow.org/
[ECMAScript6]: https://github.com/ericdouglas/ES6-Learning#articles--tutorials
[Babel]: https://babeljs.io
[Playkit JS Player]: https://github.com/kaltura/playkit-js

## Getting Started

### Installing

First, clone and run [yarn] to install dependencies:

[yarn]: https://yarnpkg.com/lang/en/

```
git clone https://github.com/kaltura/kaltura-player-js.git
cd kaltura-player-js
yarn install
```

### Building

Then, build the player

```javascript
yarn run build
```

### Embed the library in your test page

Finally, add the bundle as a script tag in your page, and initialize the player

**OVP Player**
```html
<script type="text/javascript" src="/PATH/TO/FILE/kaltura-ovp-player.js"></script>
<div id="player-placeholder" style="height:360px; width:640px">
<script type="text/javascript">
// Step 1 - Create kaltura player options object
var options = {
targetId: "player-placeholder", // Mandatory
provider: {
...
partnerId: "YOUR_PARTNER_ID" // Mandatory
...
},
player: { // Optional
...
},
ui : { // Optional
...
}
};
// Step 2 - Get the player instance
var player = KalturaPlayer.setup(options);
// Step 3 - Create media info object
var mediaInfo = {
entryId: "YOUR_ENTRY_ID" // Mandatory
};
// Step 4 - Load the media
player.loadMedia(mediaInfo).then(function() {
// Step 5 - Start to play
player.play();
});
</script>
```

**OTT Player**

```html
<script type="text/javascript" src="/PATH/TO/FILE/kaltura-tv-player.js"></script>
<div id="player-placeholder" style="height:360px; width:640px">
<script type="text/javascript">
// Step 1 - Create kaltura player options object
var options = {
targetId: "player-placeholder", // Mandatory
provider: {
...
partnerId: "YOUR_PARTNER_ID" // Mandatory
...
},
player: { // Optional
...
},
ui : { // Optional
...
}
};
// Step 2 - Get the player instance
var player = KalturaPlayer.setup(options);
// Step 3 - Create media info object
var mediaInfo = {
entryId: "YOUR_ENTRY_ID" // Mandatory
mediaType: "YOUR_MEDIA_TYPE", // Optional, default: "MEDIA"
contextType: "YOUR_MEDIA_CONTEXT_TYPE" // Optional, default: "PLAYBACK"
};
// Step 4 - Load the media
player.loadMedia(mediaInfo).then(function() {
// Step 5 - Start to play
player.play();
});
</script>
```

## Configuration

## Running the tests

Tests can be run localy via [Karma], which will run on Chrome, Firefox and Safari

[Karma]: https://karma-runner.github.io/1.0/index.html
```
yarn run test
```

You can test individual browsers:
```
yarn run test:chrome
yarn run test:firefox
yarn run test:safari
```

### And coding style tests

We use ESLint [recommended set](http://eslint.org/docs/rules/) with some additions for enforcing [Flow] types and other rules.

See [ESLint config](.eslintrc.json) for full configuration.

We also use [.editorconfig](.editorconfig) to maintain consistent coding styles and settings, please make sure you comply with the styling.


## Compatibility

TBD

## Contributing

Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.

## Versioning

We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/kaltura/playkit-js-providers/tags).

## License

This project is licensed under the AGPL-3.0 License - see the [LICENSE.md](LICENSE.md) file for details
60,464 changes: 60,447 additions & 17 deletions dist/kaltura-player.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/kaltura-player.js.map

Large diffs are not rendered by default.

19 changes: 19 additions & 0 deletions flow-typed/types/kaltura-player-options.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// @flow
declare type PartialKalturaPlayerOptionsObject = {
targetId: string,
logLevel?: string,
disableUserCache?: boolean,
player?: PKPlayerOptionsObject,
provider: ProviderOptionsObject,
ui?: UIOptionsObject
};

declare type KalturaPlayerOptionsObject = {
targetId: string,
logLevel?: string,
disableUserCache?: boolean,
player: PKPlayerOptionsObject,
provider: ProviderOptionsObject,
ui: UIOptionsObject
};

2 changes: 2 additions & 0 deletions flow-typed/types/log-level.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
// @flow

3 changes: 2 additions & 1 deletion karma.conf.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
let webpackConfig = require('./webpack.config.js');
let webpackConfig = require('./webpack.config.ovp.js');
//Need to remove externals otherwise they won't be included in test
delete webpackConfig.externals;
webpackConfig.devtool = 'inline-source-map';

const isWindows = /^win/.test(process.platform);
const isMacOS = /^darwin/.test(process.platform);
Expand Down
28 changes: 16 additions & 12 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,12 @@
"scripts": {
"clean": "rm -rf ./dist",
"prebuild": "npm run clean",
"build": "NODE_ENV=production webpack",
"dev": "webpack-dev-server",
"watch": "webpack --progress --colors --watch",
"build:ovp": "NODE_ENV=production webpack --config webpack.config.ovp.js",
"dev:ovp": "webpack-dev-server --config webpack.config.ovp.js",
"watch:ovp": "webpack --progress --colors --watch --config webpack.config.ovp.js",
"build:ott": "NODE_ENV=production webpack --config webpack.config.ott.js",
"dev:ott": "webpack-dev-server --config webpack.config.ott.js",
"watch:ott": "webpack --progress --colors --watch --config webpack.config.ott.js",
"test": "NODE_ENV=test karma start --color",
"release": "standard-version",
"publish": "git push --follow-tags --no-verify origin master",
Expand All @@ -24,7 +27,7 @@
},
"standard-version": {
"scripts": {
"postbump": "yarn run build && npm run commit:dist"
"postbump": "yarn run build:ovp && yarn run build:ott && npm run commit:dist"
}
},
"devDependencies": {
Expand Down Expand Up @@ -76,14 +79,15 @@
"babel-polyfill": "^6.23.0",
"hls.js": "^0.8.5",
"js-logger": "^1.3.0",
"playkit-js": "https://github.com/kaltura/playkit-js.git#v0.19.1",
"playkit-js-dash": "https://github.com/kaltura/playkit-js-dash.git#v1.5.0",
"playkit-js-hls": "https://github.com/kaltura/playkit-js-hls.git#v1.5.0",
"playkit-js-ima": "https://github.com/kaltura/playkit-js-ima.git#v0.3.2",
"playkit-js-kanalytics": "https://github.com/kaltura/playkit-js-kanalytics.git#v0.7.0",
"playkit-js-providers": "https://github.com/kaltura/playkit-js-providers.git#v1.5.0",
"playkit-js-ui": "https://github.com/kaltura/playkit-js-ui.git#v0.16.1",
"playkit-js-youbora": "https://github.com/kaltura/playkit-js-youbora.git#v0.3.1",
"playkit-js": "https://github.com/kaltura/playkit-js.git#v0.20.0",
"playkit-js-dash": "https://github.com/kaltura/playkit-js-dash.git#master",
"playkit-js-hls": "https://github.com/kaltura/playkit-js-hls.git#master",
"playkit-js-ima": "https://github.com/kaltura/playkit-js-ima.git#master",
"playkit-js-kanalytics": "https://github.com/kaltura/playkit-js-kanalytics.git#master",
"playkit-js-ott-analytics": "https://github.com/kaltura/playkit-js-ott-analytics.git#master",
"playkit-js-providers": "https://github.com/kaltura/playkit-js-providers.git#v2.0.0",
"playkit-js-ui": "https://github.com/kaltura/playkit-js-ui.git#master",
"playkit-js-youbora": "https://github.com/kaltura/playkit-js-youbora.git#master",
"shaka-player": "2.2.2"
},
"repository": {
Expand Down
37 changes: 0 additions & 37 deletions samples/all-plugins.html

This file was deleted.

42 changes: 42 additions & 0 deletions samples/ovp/all-plugins.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="./style.css"/>
<script src="./kaltura-ovp-player.js" type="text/javascript"></script>
</head>
<body>
<div id="player-placeholder"></div>
<script>
var config = {
targetId: 'player-placeholder',
provider: {
partnerId: 1091,
env: {
cdnUrl: "http://qa-apache-php7.dev.kaltura.com/",
serviceUrl: "http://qa-apache-php7.dev.kaltura.com/api_v3"
}
},
player: {
plugins: {
kanalytics: {
serviceUrl: "http://qa-apache-php7.dev.kaltura.com/api_v3"
},
ima: {
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator='
}
}
}
};

try {
var kalturaPlayer = KalturaPlayer.setup(config);
kalturaPlayer.loadMedia({entryId: '0_wifqaipd'});
} catch (e) {
console.error(e.message)
}
</script>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="./style.css"/>
<script src="./kaltura-player.js" type="text/javascript"></script>
<script src="./kaltura-ovp-player.js" type="text/javascript"></script>
</head>
<body>
<button onclick="changeMediaHls()">Change Media -> Hls</button>
Expand All @@ -14,15 +14,18 @@
<div id="player-placeholder"></div>
<script>
var config = {
partnerId: 1091,
env: {
cdnUrl: "http://qa-apache-php7.dev.kaltura.com/",
serviceUrl: "http://qa-apache-php7.dev.kaltura.com/api_v3"
targetId: "player-placeholder",
provider: {
partnerId: 1091,
env: {
cdnUrl: "http://qa-apache-php7.dev.kaltura.com/",
serviceUrl: "http://qa-apache-php7.dev.kaltura.com/api_v3"
}
}
};
try {
var kalturaPlayer = KalturaPlayer.setup('player-placeholder', config);
kalturaPlayer.loadMedia('0_wifqaipd');
var kalturaPlayer = KalturaPlayer.setup(config);
kalturaPlayer.loadMedia({entryId: '0_wifqaipd'});

kalturaPlayer.addEventListener(kalturaPlayer.Event.CHANGE_SOURCE_STARTED, () => {
console.log("TEST: CHANGE_SOURCE_STARTED");
Expand All @@ -45,7 +48,7 @@
}]
}
});
kalturaPlayer.loadMedia('0_wifqaipd').then(() => {
kalturaPlayer.loadMedia({entryId: '0_wifqaipd'}).then(() => {
kalturaPlayer.ready().then(() => {
console.log("TEST: ready HLS");
});
Expand All @@ -62,7 +65,7 @@
}]
}
});
kalturaPlayer.loadMedia('0_wifqaipd').then(() => {
kalturaPlayer.loadMedia({entryId: '0_wifqaipd'}).then(() => {
kalturaPlayer.ready().then(() => {
console.log("TEST: ready DASH");
});
Expand All @@ -79,7 +82,7 @@
}]
}
});
kalturaPlayer.loadMedia('0_wifqaipd').then(() => {
kalturaPlayer.loadMedia({entryId: '0_wifqaipd'}).then(() => {
kalturaPlayer.ready().then(() => {
console.log("TEST: ready PROGRESSIVE");
});
Expand Down
Loading

0 comments on commit c740a33

Please sign in to comment.