PlayKit JS Bumper is written in ECMAScript6, statically analyzed using Typescript, and transpiled in ECMAScript5 using Babel.
Getting Started
Prerequisites
The plugin requires Kaltura Player to be loaded first.
Installing
First, clone and run yarn to install dependencies:
git clone https://github.com/kaltura/playkit-js-bumper.git cd playkit-js-bumper yarn install
Building
Then, build the player
yarn run build
Embed the library on your test page
Finally, add the bundle as a script tag on your page, and initialize the player
<script type="text/javascript" src="/PATH/TO/FILE/kaltura-player.js"></script>
<!--Kaltura player-->
<script type="text/javascript" src="/PATH/TO/FILE/bumper.js"></script>
<!--PlayKit info plugin-->
<div id="player-placeholder" style="height:360px; width:640px"> <script type="text/javascript"> var playerContainer = document.querySelector("#player-placeholder"); var config = { ... targetId: 'player-placeholder', plugins: { "bumper": {
"url": "<BUMPER URL>"
} } ... }; var player = KalturaPlayer.setup(config); player.loadMedia(...); </script>
</div>Documentation
The bumper plugin's purpose is to give the application a way to display a short clip before/after the main entry playback Allow the player to display a short clip before the main entry. (Channel id, Sponsored by and more)
Configuration
In order to enable the plugin you can give the following config parameters while url it is the only "must" key to make the plugin work
id
default = '' - The bumper container div id
url
the url of the bumper video
clickThroughUrl
URL to a website that will be opened when clicking on the bumper screen
position
default [0] - bumper before video playback, it receives an array that configured wheter bumper will be shown on playback start, playback end or both => [0], [-1], [0, -1]
disableMediaPreload
default = false, when using main video tag we will want it to be true
playOnMainVideoTag
default = false, may be used as true on TV's, ios plays inline = false or ios native full screen mode.
Default Config Json Example
plugins: { bumper: { id: '', url: '', clickThroughUrl: '', position: [], disableMediaPreload: false, playOnMainVideoTag: false } }
Example:
Coding style tests
We use ESLint recommended set with some additions for enforcing [Flow] types and other rules.
See ESLint config for full configuration.
We also use .editorconfig to maintain consistent coding styles and settings, please make sure you comply with the styling.
Contributing
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
License
This project is licensed under the AGPL-3.0 License - see the LICENSE file for details
