@playkit-js/banner-overlay

playkit-js-banner-overlay

playkit-js-banner-overlay is a kaltura player plugin that provides the ability to display configurable text banners with various positioning and styling options.

Webpack is used to build the distro bundle and serve the local development environment.

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-banner-overlay.git
yarn install

Building

Then, build the plugin

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

<!--Kaltura player-->
<script type="text/javascript" src="/PATH/TO/FILE/kaltura-player.js"></script>
<!--Playkit banner-overlay plugin -->
<script type="text/javascript" src="/PATH/TO/FILE/playkit-banner-overlay.js"></script>
<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: {
      banner-overlay: {
        text: string;
        duration?: number | 'unlimited';
        alignment?: BannerAlignment;
        allowWrapping?: boolean; // default: true
        allowClose?: boolean;  // default: false
      }
     },
    };
    var player = KalturaPlayer.setup(config);
    player.loadPlaylist(...);
  </script>
</div>

License

This project is licensed under the AGPL-3.0 License - see the LICENSE file for details