vlitejs/site/search/search_index.json

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

{"config":{"lang":["en"],"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"index.html","text":"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 written in Javascript native . Philosophy vLitejs was created with the minimum functionality required for a video player with a custom theme. The performance and weight of the library are therefore very important and this is the main vision of vLitejs. The library is composed of a Javascript Player class, extended by Youtube and HTML5 videos. It is therefore possible to add other popular video services in the future. Github npm The plugin is available as the vlitejs package name on Github and npm . If you like the project, like it on Github \ud83d\ude03 Star 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 \u2665 by @yoriiis . Contributors Contributors Many thanks to Maxime LEROUGE for its contribution and Victor Schirm for the vLitejs logo \ud83d\udc4d ((window.gitter = {}).chat = {}).options = { room: 'vlitejs/vlitejs' };","title":"Overview"},{"location":"index.html#the-new-smallest-javascript-video-library","text":"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 written in Javascript native .","title":"The new smallest Javascript video library"},{"location":"index.html#philosophy","text":"vLitejs was created with the minimum functionality required for a video player with a custom theme. The performance and weight of the library are therefore very important and this is the main vision of vLitejs. The library is composed of a Javascript Player class, extended by Youtube and HTML5 videos. It is therefore possible to add other popular video services in the future.","title":"Philosophy"},{"location":"index.html#github-npm","text":"The plugin is available as the vlitejs package name on Github and npm . If you like the project, like it on Github \ud83d\ude03 Star","title":"Github & npm"},{"location":"index.html#browsers-support","text":"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.","title":"Browsers support"},{"location":"index.html#licence","text":"vLitejs and his documentation are licensed under the MIT License . Created with \u2665 by @yoriiis .","title":"Licence"},{"location":"index.html#contributors","text":"Contributors Many thanks to Maxime LEROUGE for its contribution and Victor Schirm for the vLitejs logo \ud83d\udc4d ((window.gitter = {}).chat = {}).options = { room: 'vlitejs/vlitejs' };","title":"Contributors"},{"location":"available-methods.html","text":"Each video players instantiation return the player instance in parameter of the onReady function when the player is ready (Youtube and HTML5). Below, the list of available methods to easily manipulate the video player. play Trigger a play event to the video. 1 2 3 4 5 new vlitejs ({ onReady : ( player ) = { player . play (); } }); pause Trigger a pause event to the video. 1 2 3 4 5 new vlitejs ({ onReady : ( player ) = { player . pause (); } }); seekTo parameters: float || integer Change the current time of the video (seconds). 1 2 3 4 5 new vlitejs ({ onReady : ( player ) = { player . seekTo ( 20 ); } }); getCurrentTime @return float || integer Return the current time of the video (seconds). 1 2 3 4 5 new vlitejs ({ onReady : ( player ) = { var currentTime = player . getCurrentTime (); } }); getDuration @return float || integer Return the duration of the video (seconds). 1 2 3 4 5 new vlitejs ({ onReady : ( player ) = { var duration = player . getDuration (); } }); getInstance @return object Return the instance of the video. HTML5 - Return the video element Youtube - Return the Youtube API instance of the current video player 1 2 3 4 5 new vlitejs ({ onReady : ( player ) = { var instance = player . getInstance (); } }); requestFullscreen Request the native fullscreen event for the browser. The function must be called on a user event to prevent error on touch devices that requires user action. Youtube fullscreen API \u2714 By default, Youtube do not make available fullscreen in their API, but thanks to vLitejs framework, the native fullscreen API is available with HTML5 and Youtube video players. 1 2 3 4 5 6 7 8 new vlitejs ({ onReady : ( player ) = { document . querySelector ( .button ). addEventListener ( click , function ( e ) { e . preventDefault (); player . requestFullscreen (); }); } }); exitFullscreen Request the native exit of the fullscreen event of the browser. The function must be called on a user event to prevent error on touch devices that requires user action. Youtube fullscreen API \u2714 By default, Youtube do not make available fullscreen in their API, but thanks to vLitejs framework, the native fullscreen API is available with HTML5 and Youtube video players. 1 2 3 4 5 6 7 8 new vlitejs ({ onReady : ( player ) = { document . querySelector ( .button ). addEventListener ( click , function ( e ) { e . preventDefault (); player . exitFullscreen (); }); } }); destroy Trigger a destroy event to remove all created events and the instance of the current video player (HTML5 or Youtube). Optimized for your application \u2714 For better performance on a webapp, think about destroying the video instance when you no longer need it. 1 2 3 4 5 6 7 8 new vlitejs ({ onReady : ( player ) = { document . querySelector ( .button ). addEventListener ( click , function ( e ) { e . preventDefault (); player . destroy (); }); } }); ((window.gitter = {}).chat = {}).options = { room: 'vlitejs/vlitejs' };","title":"Available methods"},{"location":"available-methods.html#play","text":"Trigger a play event to the video. 1 2 3 4 5 new vlitejs ({ onReady : ( player ) = { player . play (); } });","title":"play"},{"location":"available-methods.html#pause","text":"Trigger a pause event to the video. 1 2 3 4 5 new vlitejs ({ onReady : ( player ) = { player . pause (); } });","title":"pause"},{"location":"available-methods.html#seekto","text":"parameters: float || integer Change the current time of the video (seconds). 1 2 3 4 5 new vlitejs ({ onReady : ( player ) = { player . seekTo ( 20 ); } });","title":"seekTo"},{"location":"available-methods.html#getcurrenttime","text":"@return float || integer Return the current time of the video (seconds). 1 2 3 4 5 new vlitejs ({ onReady : ( player ) = { var currentTime = player . getCurrentTime (); } });","title":"getCurrentTime"},{"location":"available-methods.html#getduration","text":"@return float || integer Return the duration of the video (seconds). 1 2 3 4 5 new vlitejs ({ onReady : ( player ) = { var duration = player . getDuration (); } });","title":"getDuration"},{"location":"available-methods.html#getinstance","text":"@return object Return the instance of the video. HTML5 - Return the video element Youtube - Return the Youtube API instance of the current video player 1 2 3 4 5 new vlitejs ({ onReady : ( player ) = { var instance = player . getInstance (); } });","title":"getInstance"},{"location":"available-methods.html#requestfullscreen","text":"Request the native fullscreen event for the browser. The function must be called on a user event to prevent error on touch devices that requires user action. Youtube fullscreen API \u2714 By default, Youtube do not make available fullscreen in their API, but thanks to vLitejs framework, the native fullscreen API is available with HTML5 and Youtube video players. 1 2 3 4 5 6 7 8 new vlitejs ({ onReady : ( player ) = { document . querySelector ( .button ). addEventListener ( click , function ( e ) { e . preventDefault (); player . requestFullscreen (); }); } });","title":"requestFullscreen"},{"location":"available-methods.html#exitfullscreen","text":"Request the native exit of the fullscreen event of the browser. The function must be called on a user event to prevent error on touch devices that requires user action. Youtube fullscreen API \u2714 By default, Youtube do not make available fullscreen in their API, but thanks to vLitejs framework, the native fullscreen API is available with HTML5 and Youtube video players. 1 2 3 4 5 6 7 8 new vlitejs ({ onReady : ( player ) = { document . querySelector ( .button ). addEventListener ( click , function ( e ) { e . preventDefault (); player . exitFullscreen (); }); } });","title":"exitFullscreen"},{"location":"available-methods.html#destroy","text":"Trigger a destroy event to remove all created events and the instance of the current video player (HTML5 or Youtube). Optimized for your application \u2714 For better performance on a webapp, think about destroying the video instance when you no longer need it. 1 2 3 4 5 6 7 8 new vlitejs ({ onReady : ( player ) = { document . querySelector ( .button ). addEventListener ( click , function ( e ) { e . preventDefault (); player . destroy (); }); } }); ((window.gitter = {}).chat = {}).options = { room: 'vlitejs/vlitejs' };","title":"destroy"},{"location":"download.html","text":"vLitejs is available as the vlitejs package name on Github and npm . ((window.gitter = {}).chat = {}).options = { room: 'vlitejs/vlitejs' };","title":"Download"},{"location":"getting-started.html","text":"Installation NPM Install vLitejs with npm: 1 npm install vlitejs 1 2 3 4 5 6 import vlitejs from vlitejs ; import vlitejs.css ; new vlitejs ({ selector : #player }); Manual import Includes files manually in your project: 1 2 3 4 5 6 7 8 link rel = stylesheet href = vlite.css / script src = vlitejs / script script new vlitejs ({ selector : #player }); / script ((window.gitter = {}).chat = {}).options = { room: 'vlitejs/vlitejs' };","title":"Getting started"},{"location":"getting-started.html#installation","text":"","title":"Installation"},{"location":"getting-started.html#npm","text":"Install vLitejs with npm: 1 npm install vlitejs 1 2 3 4 5 6 import vlitejs from vlitejs ; import vlitejs.css ; new vlitejs ({ selector : #player });","title":"NPM"},{"location":"getting-started.html#manual-import","text":"Includes files manually in your project: 1 2 3 4 5 6 7 8 link rel = stylesheet href = vlite.css / script src = vlitejs / script script new vlitejs ({ selector : #player }); / script ((window.gitter = {}).chat = {}).options = { room: 'vlitejs/vlitejs' };","title":"Manual import"},{"location":"how-it-works.html","text":"HTML structure HTML5 and Youtube video players use the same minimalist structure with native HTML5 video tag. HTML Each video players must have inevitably a unique id . HTML5 video {{idSelector}} - Unique HTML id {{videoSource}} - Video path 1 2 3 4 video id = {{idSelector}} class = vlite-js src = {{videoSource}} / video Youtube video {{idSelector}} - Unique HTML id {{videoId}} - Youtube video id 1 2 3 4 video id = {{idSelector}} class = vlite-js data-youtube-id = {{videoId}} / video Video skin Options Each video players has its own options object. For more flexibility, vLitejs accepts two possibilities for passed them. Options in HTML Options object must be a valid JSON and writes between single quotes in data attribute data-options . 1 2 3 video id = player data-options = { autoplay : false, controls : true} / video Option in Javascript constructor Options object passed to the constructor. 1 2 3 4 5 6 new vlitejs ({ options : { autoplay : false , controls : true } }); Only one or the other Don't pass options in the HTML in adition to Javascript constructor. If you choose to do it, there will be a conflict , and the priority will be given to options pass by the data attribute data-options in the HTML. Available options List of all options with their default values. autoplay default: boolean = false Tells vLitejs whether to enable the autoplay of the video. 1 2 3 4 5 new vlitejs ({ options : { autoplay : true } }); controls default: boolean = true Tells vLitejs whether to display the control bar of the video. 1 2 3 4 5 new vlitejs ({ options : { controls : true } }); playPause default: boolean = true Tells vLitejs whether to display the play/pause button on the control bar. 1 2 3 4 5 new vlitejs ({ options : { playPause : true } }); time default: boolean = true Tells vLitejs whether to display the time information on the control bar. 1 2 3 4 5 new vlitejs ({ options : { time : true } }); progressBar default: boolean = true Tells vLitejs whether to display the progress bar on the control bar. 1 2 3 4 5 new vlitejs ({ options : { progressBar : true } }); volume default: boolean = true Tells vLitejs whether to display the volume button on the control bar. 1 2 3 4 5 new vlitejs ({ options : { volume : true } }); fullscreen default: boolean = true Tells vLitejs whether to display the fullscreen button on the control bar. 1 2 3 4 5 new vlitejs ({ options : { fullscreen : true } }); poster default: null Tells vLitejs whether to personalize the poster url of the video. 1 2 3 4 5 new vlitejs ({ options : { poster : poster.jpg } }); bigPlay default: boolean = true Tells vLitejs whether to display the big play button on the video. 1 2 3 4 5 new vlitejs ({ options : { bigPlay : true } }); autoHide default: boolean = false Tells vLitejs whether to hide the control bar if the user is inactive (delay 3000ms). 1 2 3 4 5 new vlitejs ({ options : { autoHide : false } }); nativeControlsForTouch default: boolean = false Tells vLitejs whether to keep native controls for touch devices. 1 2 3 4 5 new vlitejs ({ options : { nativeControlsForTouch : false } }); Instantiation The vLitejs class accept an object as parameter with 3 keys: selector - Selector of the video element (mandatory) options - Object of options (optional) onReady - Callback function (optional) Selector The selector can be a string with unique identifier or an HTML element with document.querySelector('#player') . Simple example with options in HTML The simplest way to use vLitejs is like the example below. All default options are used except the poster was override by data-options . 1 2 3 4 5 video id = {{idSelector}} class = vlite-js src = {{videoSource}} data-options = { poster : poster.jpg } / video 1 2 3 new vlitejs ({ selector : #player }); Example with the onReady function and options in the constructor The onReady function is called when the current player is instanciated and ready. The function expose the player instance. 1 2 3 4 video id = {{idSelector}} class = vlite-js data-youtube-id = {{videoId}} / video 1 2 3 4 5 6 7 8 9 new vlitejs ({ selector : #player , options : { poster : poster.jpg }, onReady : ( player ) = { //Ready } }); Load Youtube API Youtube API is automatically loaded by vLitejs when a Youtube player is instanciated. All players are instanciate when the API is ready with a queuing system. ((window.gitter = {}).chat = {}).options = { room: 'vlitejs/vlitejs' };","title":"How it works"},{"location":"how-it-works.html#html-structure","text":"HTML5 and Youtube video players use the same minimalist structure with native HTML5 video tag. HTML Each video players must have inevitably a unique id .","title":"HTML structure"},{"location":"how-it-works.html#html5-video","text":"{{idSelector}} - Unique HTML id {{videoSource}} - Video path 1 2 3 4 video id = {{idSelector}} class = vlite-js src = {{videoSource}} / video","title":"HTML5 video"},{"location":"how-it-works.html#youtube-video","text":"{{idSelector}} - Unique HTML id {{videoId}} - Youtube video id 1 2 3 4 video id = {{idSelector}} class = vlite-js data-youtube-id = {{videoId}} / video","title":"Youtube video"},{"location":"how-it-works.html#video-skin","text":"","title":"Video skin"},{"location":"how-it-works.html#options","text":"Each video players has its own options object. For more flexibility, vLitejs accepts two possibilities for passed them.","title":"Options"},{"location":"how-it-works.html#options-in-html","text":"Options object must be a valid JSON and writes between single quotes in data attribute data-options . 1 2 3 video id = player data-options = { autoplay : false, controls : true} / video","title":"Options in HTML"},{"location":"how-it-works.html#option-in-javascript-constructor","text":"Options object passed to the constructor. 1 2 3 4 5 6 new vlitejs ({ options : { autoplay : false , controls : true } }); Only one or the other Don't pass options in the HTML in adition to Javascript constructor. If you choose to do it, there will be a conflict , and the priority will be given to options pass by the data attribute data-options in the HTML.","title":"Option in Javascript constructor"},{"location":"how-it-works.html#available-options","text":"List of all options with their default values.","title":"Available options"},{"location":"how-it-works.html#autoplay","text":"default: boolean = false Tells vLitejs whether to enable the autoplay of the video. 1 2 3 4 5 new vlitejs ({ options : { autoplay : true } });","title":"autoplay"},{"location":"how-it-works.html#controls","text":"default: boolean = true Tells vLitejs whether to display the control bar of the video. 1 2 3 4 5 new vlitejs ({ options : { controls : true } });","title":"controls"},{"location":"how-it-works.html#playpause","text":"default: boolean = true Tells vLitejs whether to display the play/pause button on the control bar. 1 2 3 4 5 new vlitejs ({ options : { playPause : true } });","title":"playPause"},{"location":"how-it-works.html#time","text":"default: boolean = true Tells vLitejs whether to display the time information on the control bar. 1 2 3 4 5 new vlitejs ({ options : { time : true } });","title":"time"},{"location":"how-it-works.html#progressbar","text":"default: boolean = true Tells vLitejs whether to display the progress bar on the control bar. 1 2 3 4 5 new vlitejs ({ options : { progressBar : true } });","title":"progressBar"},{"location":"how-it-works.html#volume","text":"default: boolean = true Tells vLitejs whether to display the volume button on the control bar. 1 2 3 4 5 new vlitejs ({ options : { volume : true } });","title":"volume"},{"location":"how-it-works.html#fullscreen","text":"default: boolean = true Tells vLitejs whether to display the fullscreen button on the control bar. 1 2 3 4 5 new vlitejs ({ options : { fullscreen : true } });","title":"fullscreen"},{"location":"how-it-works.html#poster","text":"default: null Tells vLitejs whether to personalize the poster url of the video. 1 2 3 4 5 new vlitejs ({ options : { poster : poster.jpg } });","title":"poster"},{"location":"how-it-works.html#bigplay","text":"default: boolean = true Tells vLitejs whether to display the big play button on the video. 1 2 3 4 5 new vlitejs ({ options : { bigPlay : true } });","title":"bigPlay"},{"location":"how-it-works.html#autohide","text":"default: boolean = false Tells vLitejs whether to hide the control bar if the user is inactive (delay 3000ms). 1 2 3 4 5 new vlitejs ({ options : { autoHide : false } });","title":"autoHide"},{"location":"how-it-works.html#nativecontrolsfortouch","text":"default: boolean = false Tells vLitejs whether to keep native controls for touch devices. 1 2 3 4 5 new vlitejs ({ options : { nativeControlsForTouch : false } });","title":"nativeControlsForTouch"},{"location":"how-it-works.html#instantiation","text":"The vLitejs class accept an object as parameter with 3 keys: selector - Selector of the video element (mandatory) options - Object of options (optional) onReady - Callback function (optional) Selector The selector can be a string with unique identifier or an HTML element with document.querySelector('#player') .","title":"Instantiation"},{"location":"how-it-works.html#simple-example-with-options-in-html","text":"The simplest way to use vLitejs is like the example below. All default options are used except the poster was override by data-options . 1 2 3 4 5 video id = {{idSelector}} class = vlite-js src = {{videoSource}} data-options = { poster : poster.jpg } / video 1 2 3 new vlitejs ({ selector : #player });","title":"Simple example with options in HTML"},{"location":"how-it-works.html#example-with-the-onready-function-and-options-in-the-constructor","text":"The onReady function is called when the current player is instanciated and ready. The function expose the player instance. 1 2 3 4 video id = {{idSelector}} class = vlite-js data-youtube-id = {{videoId}} / video 1 2 3 4 5 6 7 8 9 new vlitejs ({ selector : #player , options : { poster : poster.jpg }, onReady : ( player ) = { //Ready } });","title":"Example with the onReady function and options in the constructor"},{"location":"how-it-works.html#load-youtube-api","text":"Youtube API is automatically loaded by vLitejs when a Youtube player is instanciated. All players are instanciate when the API is ready with a queuing system. ((window.gitter = {}).chat = {}).options = { room: 'vlitejs/vlitejs' };","title":"Load Youtube API"}]}