youtube-player is an abstraction of YouTube IFrame Player API (YIPA).
The downsides of using YouTube IFrame Player API are:
- Requires to define callbacks in the global scope (
- Requires to track the state of a player (e.g. you must ensure that video player is "ready" before you can use the API).
- Registers listeners required to establish when YIPA has been loaded.
- Does not overwrite global YIPA callback functions.
- Queues player API calls until when video player is "ready".
/*** @typedef options* @see* @param* @param* @param* @param* @param*//*** @typedef YT.Player* @see* *//*** A factory function used to produce an instance of YT.Player and queue function calls and proxy events of the resulting object.** @param* the DOM element or the id of the HTML element where the API will insert an <iframe>.* @param* @param* an acceptable state when calling supported functions. Default: `false`.* See `FunctionStateMap.js` for supported functions and acceptable states.* @returns*/;
youtube-player is a factory function.
The resulting object exposes all functions of an instance of
YT.Player. The difference is that the function body is wrapped in a promise. This promise is resolved only when the player has finished loading and is ready to begin receiving API calls (
onReady). Therefore, all function calls are queued and replayed only when player is ready.
This encapsulation does not affect the API other than making every function return a promise.
let player;player = ;// 'loadVideoById' is queued until the player is ready to receive API calls.player;// 'playVideo' is queue until the player is ready to received API calls and after 'loadVideoById' has been called.player;// 'stopVideo' is queued after 'playVideo'.player;
player.on event emitter is used to listen to all YouTube IFrame Player API events, e.g.
player.off removes a previously added event listener, e.g.
var listener = player;player;
Note that the built version does not inline polyfills.
You need to polyfill the environment locally (e.g. using a service such as https://polyfill.io/v2/docs/).
youtube-player is using
debug module to expose debugging information.
debug namespace is "youtube-player".
youtube-player logs configure
localStoragedebug = 'youtube-player:*';
npm install youtube-player
Running the Examples
npm installnpm run buildcd ./examplesnpm installnpm run start
This will start a HTTP server on port 8000.