Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vlitejs with all npm packages installed. Try it out:

var vlitejs = require("vlitejs")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vlitejs v3.0.4

vLitejs is a fast and lightweight Javascript library for customizing HTML5 and Youtube video players in Javascript with a minimalist theme


vLitejs



TravisCI TravisCI npm Node.js Support Bundlephobia Npm downloads

Visit yoriiis.github.io/vlitejs to get started with vLitejs.


The new smallest Javascript video library

vLitejs is a fast and lightweight Javascript library to customize and skin native HTML5 video and Youtube video. Only 5Kb on production with gzip, vLitejs has no dependency with any framework or library and is write in Javascript native.

vLitejs demo

Installation

The plugin is available as the vlitejs package name on npm.

npm i --save-dev vlitejs
yarn add --dev vlitejs

Demo

Online demo is available on yoriiis.github.io/vlitejs/demo.

The project includes also several examples of vLitejs implementation.

How it works

HTML5 and Youtube video players use the same minimalist structure with native HTML5 <video> tag.

HTML5 video

  • {{idSelector}} - Unique HTML id
  • {{videoSource}} - Video path
<video id="{{idSelector}}"
    class="vlite-js"
    src="{{videoSource}}">
</video>

Youtube video

  • {{idSelector}} - Unique HTML id
  • {{videoId}} - Youtube video id
<video id="{{idSelector}}"
    class="vlite-js"
    data-youtube-id="{{videoId}}">
</video>

Options

Each video players has its own options object. For more flexibility, vLitejs accepts two possibilities for passed them. Available options are available on the vLitejs website.

Options in HTML

<video id="player"
    data-options='{"autoplay": false, "controls": true}'>
</video>
new vlitejs({
    selector: '#player'
});

Option in Javascript constructor

Options object passed to the constructor.

new vlitejs({
    options: {
        autoplay: false,
        controls: true
    }
});

Browsers support

The project is fully compatible with the most popular web browsers. More information about the HTML5 video support on Can I Use. HTML and CSS files are W3C valid.

Licence

vLitejs and his documentation are licensed under the MIT License.
Created with ♥ by @yoriiis.

Contributors

Many thanks to Maxime LEROUGE for its contribution and Victor Schirm for the vLitejs logo 👍

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free