Repository files navigation

vlitejs (pronounced/viːlaɪt/) is a fast and lightweight JavaScript library for customizing video and audio player. Written in native JavaScript without dependency, it is built around an API of providers and plugins to extend these capabilities and keep the core with the minimal functionalities.

HTML5 video and audio players are automatically included. Other providers like Youtube or Vimeo can be loaded on demand with theProvider API. Plugins uses the same logic and can be loaded on demand by thePlugin API. Others providers and plugins can be created and loaded by the library.

• If you are concerned about your app's loading performance, this library makes sense as it is extremely lightweight compared to the competition (only 6 KB).
• It is quite rare to need to be compatible with HTML5, Youtube, Vimeo and Dailymotion at the same time. The library contains by default only HTML5 capabilities and exposed the Provider API to extend capabilities with other providers.
• If you need specific behaviors, the plugin API allows to extends the library capabilities.
• If you need to create a video or audio player with a custom skin harmonized for all web browsers.

Sizes of thevlitejs bundle compared to the competition:

Notevlitejs 5.0.1,plyr 3.7.8,videojs 8.3.0

• Video & audio -HTML5 video,HTML5 audio,Youtube,Vimeo,Dailymotion.
• Customization - Choose the control elements you want to display.
• No dependency - Written in native Javascript without any framework.
• Fullscreen - Supports native fullscreen API.
• Provider API - Use the available providers or create your own.
• Plugin API - Use the available plugins or create your own.
• Streaming - Support HLS.js streaming playback.
• Sticky - Support for sticky.
• Events - Standardized events for all web browsers, providers and plugins.
• Autoload API - Youtube, Vimeo and Dailymotion API are automatically loaded by their provider.
• Subtitles - Supports multiple subtitle tracks (VTT).
• Picture-in-Picture - Supports Picture-in-Picture API.
• Cast - Supports for Google Cast API.
• AirPlay - Supports for Apple AirPlay API.
• Monetization - Supports for Google IMA SDK.
• Hotkeys - Supports for hotkeys to add keyboard shortcuts.
• Playsinline - Supports theplaysinline attribute.
• SVG icons - SVG are inlined into the library, no sprites to includes.
• Accessibility - W3C and A11Y valid.

✨ You can support this project withGitHub Sponsors! ♡

If you're interested in playing around with vLitejs, you can use the online code playgrounds onGlitch:

• HTML5 video
• HTML5 video HLS.js
• HTML5 video with Google Ima SDK
• HTML5 audio
• Youtube
• Vimeo
• Dailymotion

The project includes several examples ofvlitejs implementation in the directoryexamples. Run the following commands to build the assets for the examples:

npm run build&& npm run build:example

Warning vlitejs@6 is ESM and uses theNode.js packageexports.

NPM is the recommended installation method. Installvlitejs in your project with the following command:

npm install vlitejs --save-dev

yarn add vlitejs --dev

Note Minimum supportedNode.js version is16.20.0.

You can also download it and include it with a script tag as an ESM.

<linkhref="https://cdn.jsdelivr.net/npm/vlitejs@6/dist/vlite.css"rel="stylesheet"crossorigin/><scripttype="module">importVlitejsfrom'https://cdn.jsdelivr.net/npm/vlitejs@6';</script>

Note You can browse the source of the NPM package atjsdelivr.com/package/npm/vlitejs.

<videoid="player"src="<path_to_video_mp4>"></video>

<audioid="player"src="<path_to_audio_mp3>"></audio>

<divid="player"data-youtube-id="<video_id>"></div>

<divid="player"data-vimeo-id="<video_id>"></div>

<divid="player"data-dailymotion-id="<video_id>"></div>

Importvlitejs styleheet and the JavaScript library as an ES6 modules.

import'vlitejs/vlite.css';importVlitejsfrom'vlitejs';

Thevlitejs constructor accepts the following parameters:

Initialize the player with a CSS selector string.

newVlitejs('#player');

Or, initialize the player with anHTMLElement.

newVlitejs(document.querySelector('#player'));

The second arguments of the contructor is an optional object with the following parameters:

newVlitejs('#player',{options:{},onReady:function(player){},provider:'html5',plugins:[]});

The player controls can be customized with the following parameters:

Note

• ¹ Video only.
• ² Vimeo provider requires a Plus or Pro account to use this feature (seeVimeo plans).
• ³ SeeYoutube embed options andVimeo embed options.
• ⁴ Fullscreen API not yet supported on iPhone.

Theautoplay parameter automatically activates themuted option because the API can only be initiated by a user gesture (seeAutoplay policy changes).

Example of customization for theautoHide and theposter options.

newVlitejs('#player',{options:{autoHide:true,poster:'/path/to/poster.jpg'}});

The callback functiononReady is automatically executed when the player is ready. The HTML5 video and audio listen to thecanplay|loadedmetadata event. The Youtube, Vimeo and Dailymotion provider listen to theonready event returned by their API.

The function exposes theplayer parameter as the player instance. You can use it to interact with the player instance and theplayer methods.

Example of a playermuted when ready:

newVlitejs('#player',{onReady:function(player){player.mute();}});

Note TheonReady function can also be written with an arrow function.

vlitejs exposes the following nativeEvent on the.v-vlite element. Events are standardized for all providers. Each plugin has its own events which are detailed in their dedicated documentation.

Note >¹ Video only.

Example of a listener when the media triggers aplay event.

newVlitejs('#player',{onReady:(player)=>{player.on('play',()=>{// The video starts playing});}});

The player instance exposes the following methods, accessible when the player is ready.

Example of mediaduration recovery.

newVlitejs('#player',{onReady:(player)=>{player.getDuration().then((duration)=>{// The duration is available in the "duration" parameter});}});

The player exposes some custom CSS properties, locally scopped under the.v-vlite selector. You can use them to customize the design.

Many thanks toVictor Schirm for thevlitejs logo.

vlitejs is licensed under theMIT License.

Created with ♡ by@yoriiis.