vlitejs
Version:
vLitejs is a fast and lightweight Javascript library for customizing HTML5 and Youtube video players in Javascript with a minimalist theme
234 lines (185 loc) • 5.35 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Source: player-youtube.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: player-youtube.js</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>import Player from './player';
/**
* vLite Player Youtube
* @module vLite/Player/PlayerYoutube
*/
export default class PlayerYoutube extends Player {
/**
* 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, callback}) {
// Init Player class
super({
selector: selector,
options: options,
callback: callback
});
// Init Youtube player with API
this.initYoutubePlayer();
}
/**
* Initialize the Youtube player
*/
initYoutubePlayer() {
this.instancePlayer = new window.YT.Player(this.player.getAttribute('id'), {
videoId: this.player.getAttribute('data-youtube-id'),
height: '100%',
width: '100%',
playerVars: {
'showinfo': 0,
'modestbranding': 0,
'autohide': 1,
'rel': 0,
'fs': this.options.fullscreen ? 1 : 0,
'wmode': 'transparent',
'playsinline': this.options.playsinline ? 1 : 0,
'controls': this.skinDisabled ? 1 : 0
},
events: {
'onReady': data => this.onPlayerReady(data),
'onStateChange': state => this.onPlayerStateChange(state)
}
});
}
/**
* Function executed when the player is ready
* @param {Object} data Youtube datas from the player API
*/
onPlayerReady(data) {
this.player = data.target.getIframe();
super.playerIsReady();
}
/**
* Get the player instance
* @returns {Object} Youtube API instance
*/
getInstance() {
return this.instancePlayer;
}
/**
* Function executed when the player state changed
* @param {Object} e Event listener datas
*/
onPlayerStateChange(e) {
switch (e.data) {
case window.YT.PlayerState.UNSTARTED:
if (this.options.controls && this.options.time) {
super.updateDuration();
}
break;
case window.YT.PlayerState.ENDED:
super.onVideoEnded();
break;
case window.YT.PlayerState.PLAYING:
this.loading(false);
if (this.options.controls) {
setInterval(() => {
super.updateCurrentTime();
}, 100);
}
super.afterPlayPause('play');
break;
case window.YT.PlayerState.PAUSED:
super.afterPlayPause('pause');
break;
case window.YT.PlayerState.BUFFERING:
this.loading(true);
break;
}
}
/**
* Set the new current time for the player
* @param {Float|Integer} Current time video
*/
setCurrentTime(newTime) {
this.instancePlayer.seekTo(newTime);
}
/**
* Get the player current time
* @returns {Float|Integer} Current time of the video
*/
getCurrentTime() {
return this.instancePlayer.getCurrentTime();
}
/**
* Get the player duration
* @returns {Float|Integer} Duration of the video
*/
getDuration() {
return this.instancePlayer.getDuration();
}
/**
* Function executed on the video progress changed
* @param {Object} e Event listener datas
*/
onProgressChanged(e) {
this.setCurrentTime((e.target.value * this.getDuration()) / 100);
}
/**
* Play method of the player
*/
methodPlay() {
this.instancePlayer.playVideo();
}
/**
* Pause method of the player
*/
methodPause() {
this.instancePlayer.pauseVideo();
}
/**
* Mute method of the player
*/
methodMute() {
this.instancePlayer.mute();
}
/**
* Unmute method of the player
*/
methodUnMute() {
this.instancePlayer.unMute();
}
/**
* Remove the Youtube instance
*/
removeInstance() {
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>