@inlasningstjanst/video-player NPM

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

Usage

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>