@playkit-js/slate
v1.0.4
Published
[![Build Status](https://app.travis-ci.com/kaltura/playkit-js-slate.svg?branch=master)](https://app.travis-ci.com/kaltura/playkit-js-slate) [![](https://img.shields.io/npm/v/@playkit-js/slate/latest.svg)](https://www.npmjs.com/package/@playkit-js/slate) [
Downloads
8
Readme
playkit-js-slate
playkit-js-slate is a kaltura player plugin that groups several UI services, in order to simplify and facilitate the customization of the kaltura player UI by providing a simple and clean API.
Each service manages a different area of UI functionality.
It relies on kaltura player core API for managing UI features.
playkit-js-slate is written in ECMAScript6 (*.js
) and TypeScript (*.ts
) (strongly typed superset of ES6),
and transpiled in ECMAScript5 using Babel and the TypeScript compiler.
Webpack is used to build the distro bundle and serve the local development environment.
Features
Slate plugin allows to inject a slate to the player UI, using its API.
services
Slate Manager
Manages and controls the slate, including:
- Adding a slate
- Removing a slate
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-slate.git
cd playkit-js-slate
yarn install
Building
Then, build the plugin
yarn run build
Testing
The plugin uses cypress
tool for e2e tests
yarn run test
UI conf file (cypress/public/ui-conf.js
) contains Kaltura player and plugin dependencies.
Keep Kaltura player and dependency versinos aligned to currently released versions.
Embed the library in your test page
Finally, add the bundle as a script tag in 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/playkit-slate.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: {
slate: {}
}
...
};
var player = KalturaPlayer.setup(config);
player.loadMedia(...);
</script>
</div>
Documentation
Demo
https://kaltura.github.io/playkit-js-slate/demo/index.html
Compatibility
playkit-js-slate is only compatible with browsers supporting MediaSource extensions (MSE) API with 'video/MP4' mime-type inputs.
playkit-js-slate is supported on:
- Chrome 39+ for Android
- Chrome 39+ for Desktop
- Firefox 41+ for Android
- Firefox 42+ for Desktop
- IE11 for Windows 8.1+
- Edge for Windows 10+
- Safari 8+ for MacOS 10.10+
- Safari for ipadOS 13+
License
playkit-js-slate is released under Apache 2.0 License