@inlasningstjanst/video-player
v2.1.6
Published
Video player package.
Downloads
443
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://intro-films.inlasningstjanst.se'
var videoID = 'wWpacPJfK8xJh2bV0u92H' // Required: film uid
var videoContainer = new ILTVideoContainer(authToken, videoID, domain, elementID);
window.addEventListener('load', () => {
videoContainer.init();
});
// 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 |
|-----------------------------|------------|-----------------------------------------------------------|-------------------------------------------------------|
| statisticsEndpoint | String | https://intro-films.inlasningstjanst.se/public/v1/views | URL to statistics endpoint |
| hls | String | `` | Film hls |
| trackName | String | Track name | Film title |
| poster | String | /path/to/poster | Film image preview url |
| languages | Array | [] | Available languages |
| 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 |
| primaryLanguageCode | String | swe | Code of default language |
| activeAudioTrack | String | swe | Language code of default language for audio |
| activeSubtitleTrack | String | swe | 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 |
| siteLanguage | String | swe | Language code of default language |
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>