JSPM

  • Created
  • Published
  • Downloads 1670
  • Score
    100M100P100Q125558F
  • License MIT

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

Package Exports

  • vlitejs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vlitejs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme


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 👍