vlitejs

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.

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 👍

Changelog

3.0.2

Updates

• Update docs and add .eslintignore