@playkit-js/reels/README.md

[](https://github.com/kaltura/playkit-js-reels/actions/workflows/run_canary.yaml) [](http

# playkit-js-reels - Reels Plugin for the [PlayKit JS Player]

[![Build Status](https://github.com/kaltura/playkit-js-reels/actions/workflows/run_canary.yaml/badge.svg)](https://github.com/kaltura/playkit-js-reels/actions/workflows/run_canary.yaml)
[![](https://img.shields.io/npm/v/@playkit-js/reels/latest.svg)](https://www.npmjs.com/package/@playkit-js/reels)
[![](https://img.shields.io/npm/v/@playkit-js/reels/canary.svg)](https://www.npmjs.com/package/@playkit-js/reels/v/canary)

playkit-js-reels is written in [TypeScript] (`*.ts`), 
and transpiled in ECMAScript5 using [Babel](https://babeljs.io/) and the [TypeScript compiler].

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

[PlayKit JS Player]: https://github.com/kaltura/kaltura-player-js
[typescript]: https://www.typescriptlang.org/
[typescript compiler]: https://www.typescriptlang.org/docs/handbook/compiler-options.html
[webpack]: https://webpack.js.org/

## Getting Started

### Prerequisites

The plugin requires [Kaltura Player] to be loaded first.

[kaltura player]: https://github.com/kaltura/kaltura-player-js

### Installing

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

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

```
git clone https://github.com/kaltura/playkit-js-reels.git
cd playkit-js-detect-reels
yarn install
```

### Building

Then, build the plugin

```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

```html
<!--Kaltura player-->
<script type="text/javascript" src="/PATH/TO/FILE/kaltura-player.js"></script>
<!--Playkit reels plugin -->
<script type="text/javascript" src="/PATH/TO/FILE/playkit-reels.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: {
      reels: {}
     },
    };
    var player = KalturaPlayer.setup(config);
    player.loadPlaylist(...);
  </script>
</div>
```

## License

playkit-js-reels is released under [AGPL-3.0](LICENSE)