npm package: @inlasningstjanst/video-player
Description: Video player package.
Author: ILT Developers
Latest version: 2.5.4

# `@inlasningstjanst/video-player`

# Manabua video player

Manabua video player is a module for showing videos from Inlasningstjanst.se

## Installation

Use the package manager [npm](https://www.npmjs.com/get-npm) to install Manabua video player.

```bash
npm install @inlasningstjanst/video-player
```

## Usage

### Javascript

```javascript
import { ILTVideoContainer } from '@inlasningstjanst/video-player'
import '@inlasningstjanst/video-player/dist/style.css'

var authToken  =  'token' // Token for access to AP
var elementID  =  'film_container'
var domain     =  'https://connect.ilteducation.com'
var videoID    =  'wWpacPJfK8xJh2bV0u92H' // Required: film uid
var videoContainer = new ILTVideoContainer(authToken, videoID, domain, elementID);

window.addEventListener('load', () => {
    videoContainer.init();
});

// When navigating away from the view with the video player in a single page application, call the unload() method
videoContainer.unload();

// Video can also be initialized with an optional parameter "options"

// Example
var options = {
    'enabledButtons': ['theatre', 'subtitleSize'],
    'theatreContainerID': 'theatre_container', 
    'disabledLanguageTooltip': 'Example text',
}
// 'theatreContainerID' must be defined if 'enabledButtons' contains 'theatre'
var videoContainer = new ILTVideoContainer(authToken,  videoID,  domain,  elementID, options)
```

### Available options

| Value                       | Type       | Example                                                | Description                                           |
|-----------------------------|------------|--------------------------------------------------------|-------------------------------------------------------|
| hls                         | *String*   | ``                                                     | Film hls                                              |
| trackName                   | *String*   | `Track name`                                           | Film title                                            |
| poster                      | *String*   | `/path/to/poster`                                      | Film image preview url                                |
| playbackRates               | *Array*    | `[0.5, 0.8, 1, 1.2, 1.5, 2]`                           | List of available playback rates                      |
| audioTracks                 | *Array*    | `[]`                                                   | List of audio files data                              |
| subtitleTracks              | *Array*    | `[]`                                                   | List of subtitle files data                           |
| activeAudioTrack            | *String*   | `sv`                                                   | Language code of default language for audio           |
| activeSubtitleTrack         | *String*   | `sv`                                                   | Language code of default language for subtitle        |
| enabledButtons              | *Array*    | `['theatre','subtitleSize','share','fullscreen']`      | Extra buttons                                         |
| disabledLanguageTooltip     | *Boolean*  | `true`                                                 | Option for disabling language tooltip                 |
| theatreContainerID          | *String*   | `theatre_container`                                    | ID for theatre container, fill if you need to have it |
| audioCaption                | *String*   | `Audio`                                                | Text for audio caption                                |
| subtitleCaption             | *String*   | `Subtitle`                                             | Text for subtitle caption                             |
| offCaption                  | *String*   | `Off`                                                  | Text for off caption                                  |
| route                       | *String*   | `/path/to/video`                                       | Current route (for Vue.js purposes)                   |
| onActiveVideoLanguageChange | *Function* | `({type: 'audio' \| 'subtitles', lang: string}) => {}` | Callback for audio or subtitle language change        |
| onSubtitleLanguageChange    | *Function* | `(lang: string) => {}`                                 | Callback for subtitle language change                 |
| onAudioLanguageChange       | *Function* | `(lang: string) => {}`                                 | Callback for audio language change                    |
| onVolumeChange              | *Function* | `(volume: number) => {}`                               | Callback for volume change                            |
| siteLanguage                | *String*   | `sv`                                                   | Language code of default language (default 'sv')      |
| skipIntroTime               | *Number*   | `4`                                                    | Length of intro to skip (in seconds)                  |
| autoSkipIntro               | *Boolean*  | `true`                                                 | Skip intro automatically on play                      |
| showSkipIntroBtn            | *Boolean*  | `true`                                                 | Option to show Skip intro-button in player            |
| skipIntroCaption            | *String*   | `Skip intro`                                           | Text to be displayed in Skip intro-button             |
| application                 | *String*   | `manabua`                                              | Application name for statistics                       |
| applicationVersion          | *String*   | `1.0.0`                                                | Application version for statistics                    |
| initialVolume               | *Number*   | `0.5`                                                  | Initial volume between 0.0 and 1.0 (default 0.5)      |
### HTML

```html
<!DOCTYPE  html>
<html>
	<script  type="text/javascript"  src="path/to/js"></script>
	<link  rel="stylesheet"  type="text/css"  href="path/to/css">
	<body>
		<div  id="film_container"></div>
	</body>
</html>
```

### HTML (with theatreContainerID)
```html
<!DOCTYPE  html>
<html>
	<script  type="text/javascript"  src="path/to/js"></script>
	<link  rel="stylesheet"  type="text/css"  href="path/to/css">
	<body>
		<div id="theatre_container">
			<div id="film_container"></div>
			<div id="optional_additional_container">For example a list of films</div>
		</div>
	</body>
</html>
```