Customizing Video and Audio Player in Javascript | vLite.js

How to make use of it:

1. Install and import the vLite.js library:

# Yarn
$ yarn add vlitejs

# NPM
$ npm i vlitejs

// Core
import './dist/vlite.css';
import Vlitejs from './dist/vlite.js';

// Youtube Provider
import VlitejsYoutube from './dist/providers/youtube.js';

// Vimeo Provider
import VlitejsVimeo from './dist/providers/vimeo.js';

// Picture in Picture plugin
import VlitejsPip from './dist/plugins/pip.js';

// Subtitle plugin
import './dist/plugins/subtitle.css';
import VlitejsSubtitle from './dist/plugins/subtitle.js';

2. Or instantly load the mandatory JavaScript and CSS information within the doc.

<link href="dist/vlite.css" rel="stylesheet" />
<script src="dist/vlite.js"></script>
<!-- Providers & Plugins Here -->

3. Initialize the vLite.js library and we’re able to go.

new Vlitejs('#player');

4. Embed movies & audios into your web page.

<!-- HTML5 Video -->
<video id="player" class="vlite-js" src="video.mp4"></video>

<!-- HTML5 Audio -->
<audio id="player" class="vlite-js" src="audio.mp3"></audio>

<!-- Youtube Video -->
<div id="player" class="vlite-js" data-youtube-id="VideoID"></div>

<!-- Vimeo Video -->
<div id="player" class="vlite-js" data-vimeo-id="AudioID"></div>

5. Determine the provider you need to use: html5 (default), Youtube, Vimeo, or a custom supplier.

Vlitejs.registerProvider('youtube', VlitejsYoutube);
Vlitejs.registerProvider('vimeo', VlitejsVimeo);
new Vlitejs('#player',{
    provider: 'youtube'
});

6. Determine the participant plugins you need to use:

Vlitejs.registerPlugin('subtitle', VlitejsSubtitle)
Vlitejs.registerPlugin('pip', VlitejsPip)
new Vlitejs('#player',{
    plugins: ['subtitle', 'pip']
});

7. Available configuration choices.

new Vlitejs('#player',{

    options: {

      // auto play
      autoplay: false,

      // enable controls
      controls: true,

      // enables play/pause buttons
      playPause: true,

      // shows progress bar
      progressBar: true,

      // shows time
      time: true,

      // shows volume control
      volume: true,

      // shows fullscreen button
      fullscreen: true,

      // path to poster image
      poster: null,

      // shows play button
      bigPlay: true,

      // hide the control bar if the user is inactive
      autoHide: false,

      // add the playsinline attribute to the video
      playsinline: false,

      // loop the current media
      loop: false,

      // mute the current media
      muted: false,

      // Youtube/Vimeo player parameters
      providerParams: {},

    }
    
});

8. Trigger a function when the participant is prepared.

new Vlitejs('#player',{
    onReady: function (player) {
      player.pause()
    }
});

9. API strategies.

// plays the video
player.play();

// pauses the video
player.pause();

// set the volume (0-1)
player.setVolume(volume);

// get the volume
player.getVolume();

// changes the current time in seconds
player.seekTo(20);

// gets the current time
player.getCurrentTime();

// gets the duration
player.getDuration();

// mute
player.mute();

// unmute
player.unMmute();

// fullscreen mode
player.requestFullscreen();

// exit the fullsceen mode
player.exitFullscreen();

// get the player instance
player.getInstance();

// set the loading status
player.loading(true/false);

// destroys the player
player.destroy();

10. Events.

player.on('play', () => console.log('play'))
player.on('pause', () => console.log('pause'))
player.on('progress', () => console.log('progress'))
player.on('timeupdate', () => console.log('timeupdate'))
player.on('volumechange', () => console.log('volumechange'))
player.on('enterfullscreen', () => console.log('enterfullscreen'))
player.on('exitfullscreen', () => console.log('exitfullscreen'))
player.on('enterpip', () => console.log('enterpip'))
player.on('leavepip', () => console.log('leavepip'))
player.on('trackenabled', () => console.log('trackenabled'))
player.on('trackdisabled', () => console.log('trackdisabled'))
player.on('ended', () => console.log('ended'))

Custom HTML5 Video/Audio And Youtube/Vimeo Players, vLitejs Plugin/Github, customize html5 video player, youtube video player online website

See Demo And Download