@inlasningstjanst/video-player
v2.5.4
Published
Video player package.
Keywords
Readme
@inlasningstjanst/video-player
Manabua video player
Manabua video player is a module for showing videos from Inlasningstjanst.se
Installation
Use the package manager npm to install Manabua video player.
npm install @inlasningstjanst/video-playerUsage
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
<!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)
<!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>