Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
---|---|---|---|---|---|---|---|---|---|---|
Plyr | 23,414 | 277 | 145 | 3 days ago | 153 | April 20, 2022 | 806 | mit | JavaScript | |
A simple HTML5, YouTube and Vimeo player | ||||||||||
React Player | 7,523 | 1,080 | 517 | 10 days ago | 147 | September 16, 2022 | 199 | mit | JavaScript | |
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion | ||||||||||
Lightgallery | 5,730 | 122 | 26 | 24 days ago | 107 | September 19, 2022 | 50 | other | TypeScript | |
A customizable, modular, responsive, lightbox gallery plugin. | ||||||||||
Lightgallery.js | 5,223 | 54 | 25 | 8 months ago | 15 | October 29, 2020 | 2 | other | JavaScript | |
Full featured JavaScript image & video gallery. No dependencies | ||||||||||
Lite Youtube Embed | 4,548 | 2 | a month ago | 8 | March 17, 2021 | 35 | other | JavaScript | ||
A faster youtube embed. | ||||||||||
Alltube | 2,798 | 3 | 6 days ago | 54 | March 08, 2022 | 43 | gpl-3.0 | PHP | ||
Web GUI for youtube-dl | ||||||||||
Vime | 2,444 | 11 | 21 days ago | 81 | September 13, 2022 | 153 | mit | TypeScript | ||
Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion... | ||||||||||
Jarallax | 1,248 | 102 | 25 | 10 days ago | 30 | March 30, 2022 | 18 | mit | JavaScript | |
Parallax scrolling for modern browsers | ||||||||||
Jquery.mb.ytplayer | 1,231 | 17 | 10 months ago | 24 | December 04, 2020 | 36 | JavaScript | |||
use a custom yutube player for a video as background on jQuery framework | ||||||||||
Richtextview | 1,124 | 1 | 2 months ago | 53 | January 25, 2022 | 37 | apache-2.0 | Swift | ||
iOS Text View (UIView) that Properly Displays LaTeX, HTML, Markdown, and YouTube/Vimeo Links |
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 functionnalities.
HTML5 video and audio players are automatically included. Other providers like Youtube or Vimeo can be loaded on demand with the Provider API. Plugins uses the same logic and can be loaded on demand by the Plugin API. Others providers and plugins can be created and loaded by the library.
Sizes of the vLitejs bundle compared to the competition:
vLitejs | Plyr | Videojs | |
---|---|---|---|
Uncompressed | 73 KB | 310 KB | 2000 KB |
Compressed | 26 KB | 120 KB | 537 KB |
Gzip | 6 KB | 30 KB | 149 KB |
*vlitejs 4.0.0
, plyr 3.6.4
, videojs 7.11.4
playsinline
attribute.⨠You can support this project with GitHub Sponsors! ā”
If you're interested in playing around with vLitejs, you can use the online code playgrounds on Glitch:
The project includes several examples of vLitejs implementation in the directory examples
. Run the following commands to build the assets for the examples:
npm run build && npm run build:example
NPM is the recommended installation method. Install vLitejs in your project with the following command:
npm install vlitejs --save-dev
# or
yarn add vlitejs --dev
You can also download it and include it with a script tag. The library will be registered as the global variable window.Vlitejs
.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vlite.css" rel="stylesheet" crossorigin />
<script src="https://cdn.jsdelivr.net/npm/[email protected]" crossorigin></script>
You can browse the source of the NPM package at jsdelivr.com/package/npm/vlitejs.
<video id="player" class="vlite-js" src="<path_to_video_mp4>"></video>
<audio id="player" class="vlite-js" src="<path_to_audio_mp3>"></audio>
<div id="player" class="vlite-js" data-youtube-id="<video_id>"></div>
<div id="player" class="vlite-js" data-vimeo-id="<video_id>"></div>
<div id="player" class="vlite-js" data-dailymotion-id="<video_id>"></div>
Import vLitejs styleheet and the JavaScript library as an ES6 modules.
import 'vlitejs/dist/vlite.css';
import Vlitejs from 'vlitejs';
The vLitejs constructor accepts the following parameters:
Arguments | Type | Default | Description |
---|---|---|---|
selector | String|HTMLElement |
null |
Unique CSS selector string or HTMLElement to target the player |
config | Object |
{} |
Player configuration (optional) |
Initialize the player with a CSS selector string.
new Vlitejs('#player');
Or, initialize the player with an HTMLElement
.
new Vlitejs(document.querySelector('#player'));
The second arguments of the contructor is an optional object with the following parameters:
Arguments | Type | Default | Description |
---|---|---|---|
options |
Object |
{} |
Player options |
onReady |
Function|null |
null |
Callback function executed when the player is ready |
provider |
String |
'html5' |
Player provider |
plugins |
Array |
[] |
Player plugins |
new Vlitejs('#player', {
options: {},
onReady: function (player) {},
provider: 'html5',
plugins: []
});
The player controls can be customized with the following parameters:
Options | Type | Default | Description |
---|---|---|---|
controls ¹ ² |
Boolean |
true |
Display the control bar of the video |
autoplay |
Boolean |
false |
Enable the autoplay of the media |
playPause |
Boolean |
true |
Display the play/pause button on the control bar |
progressBar |
Boolean |
true |
Display the progress bar on the control bar |
time |
Boolean |
true |
Display the time information on the control bar |
volume |
Boolean |
true |
Display the volume button on the control bar |
fullscreen ¹ |
Boolean |
true |
Display the fullscreen button on the control bar |
poster ¹ |
String|null |
null |
Customize the video poster url |
bigPlay ¹ |
Boolean |
true |
Display the big play button on the poster video |
playsinline ¹ |
Boolean |
true |
Add the playsinline attribute to the video |
loop |
Boolean |
false |
Whether to loop the current media |
muted ¹ |
Boolean |
false |
Whether to mute the current media |
autoHide ¹ |
Boolean |
false |
Auto hide the control bar in the event of inactivity |
autoHideDelay ¹ |
Integer |
3000 |
Auto hide delay in millisecond |
providerParams ³ |
Object |
{} |
Overrides the player parameters of the provider |
The
autoplay
parameter automatically activates themuted
option because the API can only be initiated by a user gesture (see Autoplay policy changes).
Example of customization for the autoHide
and the poster
options.
new Vlitejs('#player', {
options: {
autoHide: true,
poster: '/path/to/poster.jpg'
}
});
The callback function onReady
is automatically executed when the player is ready. The HTML5 video and audio listen to the canplay|loadedmetadata
event. The Youtube, Vimeo and Dailymotion provider listen to the onready
event returned by their API.
The function exposes the player
parameter as the player instance. You can use it to interact with the player instance and the player methods.
Example of a player muted
when ready:
new Vlitejs('#player', {
onReady: function (player) {
player.mute();
}
});
The
onReady
function can also be written with an arrow function.
vLitejs exposes the following native Event
on the .v-vlite
element. Events are standardized for all providers, even for Youtube, Vimeo and Dailymotion. Each plugin has its own events which are detailed in their dedicated documentation.
Event Type | Description |
---|---|
play |
Sent when the playback state is no longer paused, after the play method or the autoplay |
pause |
Sent when the playback state is changed to paused |
progress |
Sent periodically to inform interested parties of progress downloading the media. |
timeupdate |
Sent when the currentTime of the media has changed |
volumechange |
Sent when audio volume changes |
enterfullscreen ¹ |
Sent when the video switches to fullscreen mode |
exitfullscreen ¹ |
Sent when the video exits fullscreen mode |
ended |
Sent when playback completes |
¹ Video only.
Example of a listener when the media triggers a play
event.
new Vlitejs('#player', {
onReady: (player) => {
player.on('play', () => {
// The video starts playing
});
}
});
Events can also be declared outside of the onReady
function.
const vlite = new Vlitejs('#player');
vlite.player.on('play', () => {
// The video starts playing
});
The player instance exposes the following methods, accessible when the player is ready.
Method | Parameters | Promise | Description |
---|---|---|---|
play() |
- | - | Start the playback |
pause() |
- | - | Pause the playback |
setVolume(volume) |
Number |
- | Set the volume between 0 and 1 |
getVolume() |
- | Promise |
Get the volume |
getCurrentTime() |
- | Promise |
Get the current time |
getDuration() |
- | Promise |
Get the duration |
mute() |
- | - | Mute the volume |
unMmute() |
- | - | Unmute the volume |
seekTo(time) |
Number |
- | Seek to a current time in seconds |
requestFullscreen() |
- | - | Request the fullscreen |
exitFullscreen() |
- | - | Exit the fullscreen |
getInstance() |
- | - | Get the player instance |
loading() |
Boolean |
- | Set the loading status |
on(event, function) |
String, Function |
- | Add an event listener |
off(event, function) |
String, Function |
- | Remove an event listener |
destroy() |
- | - | Destroy the player |
Example of media duration
recovery.
new Vlitejs('#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.
Name | Value | Description |
---|---|---|
--vlite-colorPrimary |
#ff7f15 |
Primary color |
--vlite-transition |
0.25s ease |
Transition |
--vlite-controlBarHeight |
50px |
Control bar height |
--vlite-controlBarHorizontalPadding |
10px |
Control bar horizontal padding |
--vlite-controlBarBackground |
linear-gradient(to top, #000 -50%, transparent) |
Control bar background |
--vlite-controlsColor |
#fff|#000 |
Controls color (video|audio) |
--vlite-controlsOpacity |
0.9 |
Controls opacity |
--vlite-progressBarHeight |
5px |
Progress bar height |
--vlite-progressBarBackground |
rgba(0 0 0 / 25%) |
Progress bar background |
The player accepts the following keyboard shortcuts.
Key | Action |
---|---|
space | Toggle playback |
Esc | Exit the fullscreen |
ā | Seek backward of 5s
|
ā | Seek forward of 5s
|
ā | Increase volume of 5%
|
ā | Decrease volume of 5%
|
vLitejs supports the latest 2 versions of most modern browsers with the .browserslistrc config.
Browser | Supported |
---|---|
Chrome | ā |
Firefox | ā |
Opera | ā |
Edge | ā |
Safari | ā |
iOS Safari | ā |
Many thanks to Victor Schirm for the vLitejs logo.
vLitejs is licensed under the MIT License. Created with ā” by @yoriiis.