Warning : if you don't know anything about Node, NPM and just want a Video/Audio player for your website, you should read this
- NodeJS > v6.9.4
- NPM 5
- Knowledge of Javascript & ES6
The project you are currently looking at. You need this if you want to build your own Meisterplayer-bundle and include it in your website. You can also use this project to do your own Meisterplayer development, do PR's or create a new plugin.
You do not need this project if you have your own node development environment with browserify, rollup, webpack or such. You can npm install
all needed modules and import them into your project. Check out the index.js file to get an idea of how to import and initialise Meister.
The Meister-core without plugins is nothing more as some utilities, the Meister-constructor and EventHandler. This is freely available from GitHub and can be installed from NPM
The open-source plugins you need to play media and control the player. These plugins are:
@meisterplayer/plugin-basemedia
@meisterplayer/plugin-html5player
@meisterplayer/plugin-debugoverlay
@meisterplayer/plugin-message
@meisterplayer/plugin-multisource
@meisterplayer/plugin-standardui
@meisterplayer/plugin-hls
@meisterplayer/plugin-dash
@meisterplayer/plugin-nativehls
@meisterplayer/plugin-smooth
@meisterplayer/plugin-webvtt
These are not available through GitHub and/or NPM. The meister-team will provide you with a build of the plugins upon request. You can import these into your own project or in this boilerplate project.
There are 4 ways of building Meisterplayer:
- Use this target-project and install the core/free plugins from NPM
- Use this target-project and
npm install
as files to link the modules so you can work on them - Use this target-project and install the plugins using NPM but reference them to a specific GitHub branch or commit. If you would choose to reference the develop-branch you'd be running the bleeding edge version of Meister and the Core/Free plugins
- Do not use this target and include the modules in your own project.
- Download a prebuilt Meisterplayer from https://meisterplayer.com
Steps :
- After cloning this project check whether you need all the plugins defined in package.json. Remove the ones you do not need.
- Run
npm install
. - Before moving on open
src/js/Meisterplayer.js
and remove the plugins you removed in package.json. Also remove the corresponding plugins in theMeister.builtIn
statement. - Open index.html and configure the player to your needs.
- Your done!
For a live-reloading webserver run npm start
. If you want to build a minified dist version, run npm run build:dist
you'll find a minified bundle in the dist
-folder
See DEVELOP.md
Instead of using the stable NPM packages you can live life on the bleeding edge and refer to github branches or commits. Follow the procedure of 1, only change the dependencies in package.json like so:
"dependencies": {
"@meisterplayer/meisterplayer": "git://github.com/meisterplayer/meisterplayer.git#develop",
"@meisterplayer/plugin-basemedia": "^5.0.2",
"@meisterplayer/plugin-dash": "^5.0.1",
"@meisterplayer/plugin-html5player": "^5.1.0",
"@meisterplayer/plugin-multisource": "^5.0.1",
"@meisterplayer/plugin-nativehls": "^5.0.1",
"@meisterplayer/plugin-smooth": "^5.0.1",
"@meisterplayer/plugin-standardui": "git://github.com/meisterplayer/ui-standardui.git#feature\/chromecast-button-bottom-bar", // reference a specific branch
"@meisterplayer/plugin-webvtt": "^5.0.1"
}
Instead of building separately from your own project you can install Meisterplayer and it's plugins in your project using npm install
:
npm i @meisterplayer/meisterplayer @meisterplayer/plugin-basemedia @meisterplayer/plugin-dash @meisterplayer/plugin-html5player @meisterplayer/plugin-multisource @meisterplayer/plugin-nativehls @meisterplayer/plugin-smooth @meisterplayer/plugin-standardui @meisterplayer/plugin-webvtt
You should import the plugins and meister-core in one file and load the plugins using the Meister.builtIn statement like so;
import Meister from '@meisterplayer/meisterplayer/index';
import BaseMedia from '@meisterplayer/plugin-basemedia/index';
import Html5Player from '@meisterplayer/plugin-html5player/index';
import StandardUi from '@meisterplayer/plugin-standardui/index';
import DebugOverlay from '@meisterplayer/plugin-debugoverlay/index';
import NativeHls from '@meisterplayer/plugin-nativehls/index';
import Hls from '@meisterplayer/plugin-hls/index';
import Dash from '@meisterplayer/plugin-dash/index';
import MultiSource from '@meisterplayer/plugin-multisource/index';
import WebVtt from '@meisterplayer/plugin-webvtt/index';
import Smooth from '@meisterplayer/plugin-smooth/index';
Meister.builtIn = {
[Html5Player.pluginName]: {},
[BaseMedia.pluginName]: {},
[StandardUi.pluginName]: {},
[NativeHls.pluginName]: {},
[Hls.pluginName]: {},
[Dash.pluginName]: {},
[MultiSource.pluginName]: {},
[WebVtt.pluginName]: {},
[Smooth.pluginName]: {},
[DebugOverlay.pluginName]: {},
};
Meister.Configuration.overwrite(Meister.builtIn);
Where you import this or how you want to include the library in your project is entirely up to you. Please be aware that using this method will decrease the Meister-core team ability to debug your application. So if you have a support contract and need support, be sure to create a single bundle for meisterplayer (types 1,2,3) and import in your code. This way we are still capable of injecting a debugbuild using Charles proxy.
Please note the imports reference to index
which essentially means they import the es6-source files, your project must be setup to transpile ES6 (babel). If it has been setup with babel you will get the benefit of optimalisations your transpiler/packager has in place.
If you do not use ES6 but wish to package your project with minified meister-code you should remove the reference to /index
at every import-stagement.
Commercial plugins are transpiled and minified
npm start
: start development servernpm run build
: create bundle without minifynpm run dist
: create dist bundle, with minifynpm run jsdoc
: create documentation from JSDoc blocksnpm run bump
: bump version (either --minor or --major )npm run changelog
: append commits to changelog with conventional changelogs (see http://notebook.aaronwest.net/2015/08/03/better-documentation-using-conventional-changelog.html )npm run generate-docs
Generate documentation from installed plugins. might be buggy at this time