vlitejs
Version:
vLitejs is a fast and lightweight Javascript library for customizing HTML5 and Youtube video players in Javascript with a minimalist theme
196 lines (149 loc) • 5.07 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Source: vlite.js</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Source: vlite.js</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>/**
* @license MIT
* @name vLitejs
* @version 3.0.0
* @author: Yoriiis aka Joris DANIEL <joris.daniel@gmail.com>
* @description: vLite.js is a fast and lightweight Javascript library to customize and skin native HTML5 video and Youtube video in Javascript native with a default skin
* {@link https://yoriiis.github.io/vlitejs}
* @copyright 2019 Joris DANIEL <https://yoriiis.github.io/vlitejs>
**/
'use strict';
import PlayerYoutube from './player-youtube';
import PlayerHtml5 from './player-html5';
// Set Youtube API configuration for the queue if the API is not ready
const _VliteYoutube = {
apiLoading: false,
apiReady: false,
apiReadyQueue: []
};
/**
* vLite entrypoint
* @module vLite/entrypoint
*/
export default class vLite {
/**
* Instanciate the constructor
* @constructor
* @param {String|Object} selector CSS selector or query selector
* @param {Object} options Player options
* @param {Function} callback Callback function executed when the player is ready
*/
constructor({
selector,
options = undefined,
callback
}) {
this.player = null;
// Detect the type of the selector (string or object)
if (typeof selector === 'string') {
this.player = document.querySelector(selector);
} else if (typeof selector === 'object') {
this.player = selector;
}
if (this.player === null) {
console.warn('[vLite] - Selector not found');
return;
}
this.options = options;
this.callback = callback;
this.initPlayer();
}
/**
* Initialize the player (Youtube or HTML5)
*/
initPlayer() {
// Detect the player type (Youtube or HTML5)
if (this.player.hasAttribute('data-youtube-id')) {
// Detect if the Youtube API is ready
if (!_VliteYoutube.apiReady) {
// Load the Youtube API if necessary
if (!_VliteYoutube.apiLoading) {
_VliteYoutube.apiLoading = true;
this.loadYoutubeAPI();
}
// Create a queue to load players when the API is ready
_VliteYoutube.apiReadyQueue.push({
player: this.player,
options: this.options,
callback: this.callback
});
} else {
// Youtube API is already available, initialize the Youtube player
this.instancePlayer = new PlayerYoutube({
selector: this.player,
options: this.options,
callback: this.callback
});
}
} else {
// Initialize the HTML5 Player
this.instancePlayer = new PlayerHtml5({
selector: this.player,
options: this.options,
callback: this.callback
});
}
}
/**
* Load the Youtube API
*/
loadYoutubeAPI() {
let script = document.createElement('script');
script.async = true;
script.type = 'text/javascript';
script.src = 'https://youtube.com/iframe_api';
// Function called when the API is ready
window.onYouTubeIframeAPIReady = () => {
_VliteYoutube.apiReady = true;
// Initialize the player queue
_VliteYoutube.apiReadyQueue.forEach(element => {
this.instancePlayer = new PlayerYoutube({
selector: element.player,
options: element.options,
callback: element.callback
});
});
_VliteYoutube.apiReadyQueue = [];
};
document.getElementsByTagName('body')[0].appendChild(script);
}
/**
* Destroy the player instance
*/
destroy() {
this.instancePlayer.destroy();
}
}
</code></pre>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-vLite_entrypoint.html">vLite/entrypoint</a></li><li><a href="module-vLite_Player.html">vLite/Player</a></li><li><a href="module-vLite_Player_PlayerHtml5.html">vLite/Player/PlayerHtml5</a></li><li><a href="module-vLite_Player_PlayerYoutube.html">vLite/Player/PlayerYoutube</a></li></ul><h3>Classes</h3><ul><li><a href="module-vLite_entrypoint.html">vLite/entrypoint</a></li><li><a href="module-vLite_Player.html">vLite/Player</a></li><li><a href="module-vLite_Player_PlayerHtml5.html">vLite/Player/PlayerHtml5</a></li><li><a href="module-vLite_Player_PlayerYoutube.html">vLite/Player/PlayerYoutube</a></li></ul><h3>Global</h3><ul><li><a href="global.html#vLitejs">vLitejs</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.3</a> on Tue Nov 19 2019 00:24:53 GMT+0100 (CET)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>