Custom HTML5 And Youtube Video Players – vLite.js

Category: Javascript | February 4, 2019
Author: yoriiis
Views Total: 1,128
Official Page: Go to website
Last Update: February 4, 2019
License: MIT

Preview:

Custom HTML5 And Youtube Video Players – vLite.js

Description:

vLite.js is a native JavaScript plugin designed for creating custom HTML5 and Youtube Video players with your own styles.

The goal of this library is to make the HTML5 and Youtube videos have a consistent look.

How to use it:

Import the JavaScript file ‘vLite.js’ and Stylesheet ‘vLite.css’ into your webpage.

<link rel="stylesheet" href="css/vlite.css">
<script src="js/vlite-html5+youtube.min.js"></script>

Replace the default HTML5 video player.

<video id="demo" 
       class="vlite-js" 
       src="example.mp4">
</video>
var playerHtml5 = new vLite({
    selector: '#demo',
    options: {
      // options here
    },
    callback: (player) => {
      // callback function here
    }
});

To replace the default Youtube video player:

  • data-youtube-id: video ID
<video id="example" 
       class="vlite-js" 
       data-youtube-id="ICanFGTsW8c">
</video>
var playerYT = new vLite({
    selector: '#example',
    options: {
      // options here
    },
    callback: (player) => {
      // callback function here
    }
});

Available configuration options.

{

  // auto play
  autoplay: false,

  // enable controls
  controls: true,

  // enables play/pause buttons
  playPause: true,

  // shows timeline
  timeline: 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,

  // keeps native controls for touch devices
  nativeControlsForTouch: false
  
}

You can also pass the options in the data-options attributes as follows:

<video id="example" 
       class="vlite-js" 
       data-youtube-id="ICanFGTsW8c" 
       data-options='{"autoplay": false, "controls": true}'>
</video>

API methods.

var myPlayer = new vLite();

// plays the video
myPlayer.play();

// pauses the video
myPlayer.pause();

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

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

// gets the duration
myPlayer.getDuration();

// fullscreen mode
myPlayer.requestFullscreen();

// exits the fullsceen mode
myPlayer.exitFullscreen();

// destroys the player
myPlayer.destroy();

Changelog:

02/04/2019

  • v2.0.1

You Might Be Interested In:


Leave a Reply