Custom HTML5 Video/Audio And Youtube/Vimeo Players – vLite.js

Category: Javascript | June 18, 2021
Author: yoriiis
Views Total: 30 views
Official Page: Go to website
Last Update: June 18, 2021
License: MIT

Preview:

Custom HTML5 Video/Audio And Youtube/Vimeo Players – vLite.js

Description:

vLite.js is an advanced media player JavaScript library designed for creating custom HTML5 videos/audio and Youtube/Vimeo players with your own styles.

The goal of this library is to make the web videos have a consistent look.

How to use it (v4):

1. Install and import the vLite.js library and OPTIONAL providers & plugins as follows:

# 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 directly load the necessary JavaScript and CSS files in the document.

<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 ready to go.

new Vlitejs('#player');

4. Embed videos & audios into your 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 want to use: html5 (default), Youtube, Vimeo, or custom provider.

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

6. Determine the player plugins you want to use:

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

7. Available configuration options.

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 player is ready.

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

9. API methods.

// 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'))

Changelog:

v4.0.1 (06/18/2021)

  • Fixed the default parameters and fix the selector HTMLDivElement

v4.0.0 (04/17/2021)

  • New design and new icons
  • Add Vimeo provider
  • Add Audio HTML5 provider
  • Add subtitle plugin
  • Add Picture-in-Picture plugin
  • Add a provider API to allow extension of current providers
  • Add a plugin API to allow extension of current plugins
  • Add sample-provider.js and sample-plugin.js for guidelines
  • Add multiple native Event fired on media actions (play, pause, etc.)
  • Add A11Y compatibility (<button>, <input type=”range”>, aria-*, :focus-visible)
  • Add the volume up/down shortcuts
  • Update HTML attributes from options and vice versa (autoplay, playsinline, muted, loop)
  • Rename window.vlitejs to window.Vlitejs to make sure the constructor name starts with a capital
  • Remove nativeControlsForTouch option
  • Remove data-options HTML attributes in favor of options from the JS constructor

12/21/2019

  • v3.0.4

12/11/2019

  • v3.0.3: Fixed strict node engine version break with different node version

11/23/2019

  • v3.0.1: Refactor

02/04/2019

  • v2.0.1

You Might Be Interested In:


Leave a Reply