This is the Meister core. It required additional plugins to get set up. This guide will help you get starting up and play a simple MP4 video.
Warning : if you don’t know anything about Node, NPM and just want a Video/Audio player for your website, you should read this guide to set up.
Installation
To install using npm:
npm install @meisterplayer/meisterplayer
And then import them:
importMeisterfrom'@meisterplayer/meisterplayer'
To install using <script> tags:
<scriptsrc="Meister.js">
Getting started
To get started simply include the Meister.js in your page. There are two ways of setting up the Meister Player. The usage of <script> tags and the use of ES6 modules. We will explain the <script> tag version first.
Meister on it’s own can’t play video’s it requires at least a player plugin and a media plugin. We will show in the example below how to add these plugins to get a playing MP4 file. We will be using the following plugins:
The following snippet can be used to initialize the Meister player:
<!DOCTYPE html>
<html>
<head>
<title>Meister player example</title>
<!-- It's important that Meister.js will be loaded before the plugins -->
<scriptsrc="Meister.js"></script>
<scriptsrc="BaseMedia.js"></script>
<scriptsrc="Html5Player.js"></script>
<scriptsrc="StandardUi.js"></script>
</head>
<body>
<divid="player"></div>
<script>
// Initialize the meister player
// Meister uses the querySelector to get the dom element.
var meisterPlayer =newMeister('#player',{
// Configures Meister player to use these plugin.
// We will later go in depth what these are for.
BaseMedia:{},
Html5Player:{},
});
// Configures meister to play the mp4 media item.
meisterPlayer.setItem({
src:'INSERT_URL_TO_MP4_HERE',
type:'mp4',// Tells meister we will play an mp4 item.
});
// Tells meister we are ready to load the player and start playing
meisterPlayer.load();
</script>
</body>
</html>
This is the basic way of getting setup with Meister. We will later get in depth in what these functions exactly does and how we can configure Meister to our likings.
Setting up using ES6 modules
The following example shows how you can use ES6 modules to load in the Meister players with the plugins mentioned above.
First install Meister through NPM:
npm install -S @npm-wearetriple/meisterplayer
And for the additional plugins you can also npm install them:
query:String - The dom Query to select the <div> element you want to use for Meister
query:Element - The dom element you want to use. This is an alternate to using query:String.
config:Object - The config object to initialize plugins and configure them to your liking. Check each plugin for documentation to configure a plugin.
returns an instance of Meister
Example:
// Using the query:String method:
var meisterPlayer =newMeister('#player',{
// Configuration per plugin goes here.
});
// Using the query:Element method:
var meisterPlayer =newMeister(document.getElementById('player'),{
// Configuration per plugin goes here.
});
Methods:
setItem(item:Object\);
Sets the media item that you want to play. Configuration can differ per plugin but the basic item object has a src & type.
MediaObject:
src:String : URL to the media.
type:String : The type of the media. Check the plugin documentation to see what type exactly you have to input.
…:any : A MediaObject can have more options but this differs per plugin. Please check the plugin documentation for more options.
Example (requires a mp4 plugin):
meisterInstance.setItem({
src:'https://example.com/video.mp4',
type:'mp4'
});
setPlaylist(items:Array[Object:\<MediaObject>])
Same as setItem(Object:MediaObject) only this method allows for multiple items to be set. Meister will walk through the items one by one (When the end event is triggered).
Please see setItem(Object:MediaObject) for the documentation of MediaObject
Example:
meisterInstance.setPlaylist([
{
src:'https://example.com/video.mp4',
type:'mp4'
},
{
src:'https://example.com/anotherVideo.mp4',
type:'mp4'
}
]);
switchItem(item:Object:\)
Allows for switching items inside of Meister. This way you can load a new item while already playing a other item.
Please see setItem(Object:MediaObject) for the documentation of MediaObject
Example:
meisterInstance.switchItem({
src:'https://example.com/video.mp4',
type:'mp4'
});
load()
Loads the media item that has been set by setItem. Or the first item in the playlist that has been set by setPlaylist.
Example:
meisterInstance.load();
destroy()
Destroys the meister player and it’s plugins.
Example:
meisterInstsance.destroy()
play(triggerByUser:Boolean = false)
Starts playback of the media.
triggerByUser:Boolean (default false): Defines if the play() has been triggered by the user. (Analytics purposes).
Example:
meisterInstsance.play()
pause(triggerByUser:Boolean = false)
Pauses playback of the media.
triggerByUser:Boolean (default false): Defines if the pause() has been triggered by the user. (Analytics purposes).
Example:
meisterInstsance.pause()
requestFullscreen()
Requests the window if we can make the player full screen. This functions can only be called as a result of a user action. Otherwise browsers will decline the request.
Listens for events happening inside of Meister. For all the hooks checkout the events section. Also you can check per plugin what events are available.
hook:String : The name of the event you want to listen to.
handler:Function(event:any) : The callback for the event. What returns is different per event.
caller?:String : The caller of the event. This is used for tracking if an exception is thrown so you can see where the exception occured.
returns EventHandle:
id:Number The id of the event.
hook:String The hook that was used for this event.
This is the same as on(hook:String, handler:Function(event:any), caller?:String). Only difference is this function only listens one time for the event.
returns EventHandle:
id:Number The id of the event.
hook:String The hook that was used for this event.
Example:
// Without caller set
meisterInstance.one('playerPause',()=>{
console.log('The player is now paused');
});
meisterInstance.one('playerPlay',()=>{
console.log('The player triggered play');
},'MyScript');
trigger(hook:String, …args)
Triggers an event to the specified hook.
hook:String - The hook you want to listen to check. For all the hooks checkout the events section. Also you can check per plugin what events are available.
…args:any - This is given to the listener to handle.
Example:
meisterInstance.trigger('myCustomEvent',{
someProps:'test'
});
remove(events:EventHandle|Array)
Removes all given listeners from the event stack.
events:EventHandle|Array - Object that is returned by on() and one()
Example:
constevent= meisterInstance.on(...);
meisterInstance.remove(event);
disable(hook:String, handler:Function(event:any))
Disables an event so on() and one() will not be triggered with the given hook. You can use the handler parameter to still handle the event.
hook:String - The hook you want to listen to check. For all the hooks checkout the events section. Also you can check per plugin what events are available.
handler:Function(event:any) : The callback for the event. What returns is different per event.
Example
meisterInstance.disable('playerPlay',()=>{
// Now only this function gets called when meister triggers 'playerPlay'.
});
enable(hook:String)
Enables an event so it can be used again.
hook:String - The hook you want to listen to check. For all the hooks checkout the events section. Also you can check per plugin what events are available.
Throws an error on the meister player. This will also trigger an event so plugins can handle this (For example log the error to a server or show a different UI).
message:String - The error you want to output
code:String - An identifier of the error message. (ERR-9001 = unknown error)
options:Object - The options you want to send along the event. Can differ per plugin.
