vlitejs
Version:
vLitejs is a fast and lightweight Javascript library for customizing HTML5 and Youtube video players in Javascript with a minimalist theme
1,158 lines (830 loc) • 39.4 kB
HTML
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="vLitejs includes a minimalist HTML structure to start your video player. All available options are listed here and can be changed in the constructor">
<link rel="canonical" href="https://yoriiis.github.io/vlitejs/how-it-works.html">
<meta name="author" content="Joris DANIEL aka Yoriiis">
<meta name="lang:clipboard.copy" content="Copy to clipboard">
<meta name="lang:clipboard.copied" content="Copied to clipboard">
<meta name="lang:search.language" content="en">
<meta name="lang:search.pipeline.stopwords" content="True">
<meta name="lang:search.pipeline.trimmer" content="True">
<meta name="lang:search.result.none" content="No matching documents">
<meta name="lang:search.result.one" content="1 matching document">
<meta name="lang:search.result.other" content="# matching documents">
<meta name="lang:search.tokenizer" content="[\s\-]+">
<link rel="shortcut icon" href="images/vlitejs-favicon.png">
<meta name="generator" content="mkdocs-1.0.4, mkdocs-material-4.4.3">
<title>How it works - vLitejs</title>
<link rel="stylesheet" href="assets/stylesheets/application.30686662.css">
<link rel="stylesheet" href="assets/stylesheets/application-palette.a8b3c06d.css">
<meta name="theme-color" content="">
<script src="assets/javascripts/modernizr.74668098.js"></script>
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Ubuntu+Mono&display=fallback">
<style>body,input{font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Ubuntu Mono","Courier New",Courier,monospace}</style>
<link rel="stylesheet" href="assets/fonts/material-icons.css">
<script>
window.ga = window.ga || function() {
(ga.q = ga.q || []).push(arguments)
}
ga.l = +new Date
/* Setup integration and send page view */
ga("create", "UA-108758282-2", "auto")
ga("set", "anonymizeIp", true)
ga("send", "pageview")
/* Register handler to log search on blur */
document.addEventListener("DOMContentLoaded", () => {
if (document.forms.search) {
var query = document.forms.search.query
query.addEventListener("blur", function() {
if (this.value) {
var path = document.location.pathname;
ga("send", "pageview", path + "?q=" + this.value)
}
})
}
})
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<meta property="og:title" content="vLitejs" />
<meta property="og:description" content="vLitejs is a fast and lightweight Javascript library for customizing HTML5 and Youtube video players in Javascript with a minimalist theme" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yoriiis.github.io/vlitejs/" />
<meta property="og:image" content="https://yoriiis.github.io/vlitejs/assets/images/vlitejs.jpg" />
<link rel="stylesheet" type="text/css" href="https://yoriiis.github.io/vlitejs/assets/stylesheets/override.css" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
</head>
<body dir="ltr" data-md-color-primary="white" data-md-color-accent="white">
<svg class="md-svg">
<defs>
<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448" viewBox="0 0 416 448" id="__github"><path fill="currentColor" d="M160 304q0 10-3.125 20.5t-10.75 19T128 352t-18.125-8.5-10.75-19T96 304t3.125-20.5 10.75-19T128 256t18.125 8.5 10.75 19T160 304zm160 0q0 10-3.125 20.5t-10.75 19T288 352t-18.125-8.5-10.75-19T256 304t3.125-20.5 10.75-19T288 256t18.125 8.5 10.75 19T320 304zm40 0q0-30-17.25-51T296 232q-10.25 0-48.75 5.25Q229.5 240 208 240t-39.25-2.75Q130.75 232 120 232q-29.5 0-46.75 21T56 304q0 22 8 38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0 37.25-1.75t35-7.375 30.5-15 20.25-25.75T360 304zm56-44q0 51.75-15.25 82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5T212 416q-19.5 0-35.5-.75t-36.875-3.125-38.125-7.5-34.25-12.875T37 371.5t-21.5-28.75Q0 312 0 260q0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25 30.875Q171.5 96 212 96q37 0 70 8 26.25-20.5 46.75-30.25T376 64q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34 99.5z"/></svg>
</defs>
</svg>
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" data-md-component="overlay" for="__drawer"></label>
<a href="#html-structure" tabindex="1" class="md-skip">
Skip to content
</a>
<header class="md-header" data-md-component="header">
<nav class="md-header-nav md-grid">
<div class="md-flex">
<div class="md-flex__cell md-flex__cell--shrink">
<a href="https://yoriiis.github.io/vlitejs/" title="vLitejs" class="md-header-nav__button md-logo">
<img src="images/logo-vlite-small.svg" width="24" height="24">
</a>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--menu md-header-nav__button" for="__drawer"></label>
</div>
<div class="md-flex__cell md-flex__cell--stretch">
<div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
<span class="md-header-nav__topic">
vLitejs
</span>
<span class="md-header-nav__topic">
How it works - vLitejs
</span>
</div>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--search md-header-nav__button" for="__search"></label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query" data-md-state="active">
<label class="md-icon md-search__icon" for="__search"></label>
<button type="reset" class="md-icon md-search__icon" data-md-component="reset" tabindex="-1">

</button>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="result">
<div class="md-search-result__meta">
Type to start searching
</div>
<ol class="md-search-result__list"></ol>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<div class="md-header-nav__source">
<a href="https://github.com/yoriiis/vlitejs/" title="Go to repository" class="md-source" data-md-source="github">
<div class="md-source__icon">
<svg viewBox="0 0 24 24" width="24" height="24">
<use xlink:href="#__github" width="24" height="24"></use>
</svg>
</div>
<div class="md-source__repository">
yoriiis/vlitejs
</div>
</a>
</div>
</div>
</div>
</nav>
</header>
<div class="md-container">
<main class="md-main" role="main">
<div class="md-main__inner md-grid" data-md-component="container">
<div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary" data-md-level="0">
<label class="md-nav__title md-nav__title--site" for="__drawer">
<a href="https://yoriiis.github.io/vlitejs/" title="vLitejs" class="md-nav__button md-logo">
<img src="images/logo-vlite-small.svg" width="48" height="48">
</a>
vLitejs
</label>
<div class="md-nav__source">
<a href="https://github.com/yoriiis/vlitejs/" title="Go to repository" class="md-source" data-md-source="github">
<div class="md-source__icon">
<svg viewBox="0 0 24 24" width="24" height="24">
<use xlink:href="#__github" width="24" height="24"></use>
</svg>
</div>
<div class="md-source__repository">
yoriiis/vlitejs
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="index.html" title="Overview" class="md-nav__link">
Overview
</a>
</li>
<li class="md-nav__item">
<a href="getting-started.html" title="Getting started" class="md-nav__link">
Getting started
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-toggle md-nav__toggle" data-md-toggle="toc" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
How it works
</label>
<a href="how-it-works.html" title="How it works" class="md-nav__link md-nav__link--active">
How it works
</a>
<nav class="md-nav md-nav--secondary">
<label class="md-nav__title" for="__toc">Table of contents</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#html-structure" class="md-nav__link">
HTML structure
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#html5-video" class="md-nav__link">
HTML5 video
</a>
</li>
<li class="md-nav__item">
<a href="#youtube-video" class="md-nav__link">
Youtube video
</a>
</li>
<li class="md-nav__item">
<a href="#video-skin" class="md-nav__link">
Video skin
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#options" class="md-nav__link">
Options
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#options-in-html" class="md-nav__link">
Options in HTML
</a>
</li>
<li class="md-nav__item">
<a href="#option-in-javascript-constructor" class="md-nav__link">
Option in Javascript constructor
</a>
</li>
<li class="md-nav__item">
<a href="#available-options" class="md-nav__link">
Available options
</a>
</li>
<li class="md-nav__item">
<a href="#autoplay" class="md-nav__link">
autoplay
</a>
</li>
<li class="md-nav__item">
<a href="#controls" class="md-nav__link">
controls
</a>
</li>
<li class="md-nav__item">
<a href="#playpause" class="md-nav__link">
playPause
</a>
</li>
<li class="md-nav__item">
<a href="#time" class="md-nav__link">
time
</a>
</li>
<li class="md-nav__item">
<a href="#progressbar" class="md-nav__link">
progressBar
</a>
</li>
<li class="md-nav__item">
<a href="#volume" class="md-nav__link">
volume
</a>
</li>
<li class="md-nav__item">
<a href="#fullscreen" class="md-nav__link">
fullscreen
</a>
</li>
<li class="md-nav__item">
<a href="#poster" class="md-nav__link">
poster
</a>
</li>
<li class="md-nav__item">
<a href="#bigplay" class="md-nav__link">
bigPlay
</a>
</li>
<li class="md-nav__item">
<a href="#autohide" class="md-nav__link">
autoHide
</a>
</li>
<li class="md-nav__item">
<a href="#nativecontrolsfortouch" class="md-nav__link">
nativeControlsForTouch
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#instantiation" class="md-nav__link">
Instantiation
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#simple-example-with-options-in-html" class="md-nav__link">
Simple example with options in HTML
</a>
</li>
<li class="md-nav__item">
<a href="#example-with-the-onready-function-and-options-in-the-constructor" class="md-nav__link">
Example with the onReady function and options in the constructor
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#load-youtube-api" class="md-nav__link">
Load Youtube API
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="available-methods.html" title="Available methods" class="md-nav__link">
Available methods
</a>
</li>
<li class="md-nav__item">
<a href="demo.html" title="Demo" class="md-nav__link">
Demo
</a>
</li>
<li class="md-nav__item">
<a href="download.html" title="Download" class="md-nav__link">
Download
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary">
<label class="md-nav__title" for="__toc">Table of contents</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#html-structure" class="md-nav__link">
HTML structure
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#html5-video" class="md-nav__link">
HTML5 video
</a>
</li>
<li class="md-nav__item">
<a href="#youtube-video" class="md-nav__link">
Youtube video
</a>
</li>
<li class="md-nav__item">
<a href="#video-skin" class="md-nav__link">
Video skin
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#options" class="md-nav__link">
Options
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#options-in-html" class="md-nav__link">
Options in HTML
</a>
</li>
<li class="md-nav__item">
<a href="#option-in-javascript-constructor" class="md-nav__link">
Option in Javascript constructor
</a>
</li>
<li class="md-nav__item">
<a href="#available-options" class="md-nav__link">
Available options
</a>
</li>
<li class="md-nav__item">
<a href="#autoplay" class="md-nav__link">
autoplay
</a>
</li>
<li class="md-nav__item">
<a href="#controls" class="md-nav__link">
controls
</a>
</li>
<li class="md-nav__item">
<a href="#playpause" class="md-nav__link">
playPause
</a>
</li>
<li class="md-nav__item">
<a href="#time" class="md-nav__link">
time
</a>
</li>
<li class="md-nav__item">
<a href="#progressbar" class="md-nav__link">
progressBar
</a>
</li>
<li class="md-nav__item">
<a href="#volume" class="md-nav__link">
volume
</a>
</li>
<li class="md-nav__item">
<a href="#fullscreen" class="md-nav__link">
fullscreen
</a>
</li>
<li class="md-nav__item">
<a href="#poster" class="md-nav__link">
poster
</a>
</li>
<li class="md-nav__item">
<a href="#bigplay" class="md-nav__link">
bigPlay
</a>
</li>
<li class="md-nav__item">
<a href="#autohide" class="md-nav__link">
autoHide
</a>
</li>
<li class="md-nav__item">
<a href="#nativecontrolsfortouch" class="md-nav__link">
nativeControlsForTouch
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#instantiation" class="md-nav__link">
Instantiation
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#simple-example-with-options-in-html" class="md-nav__link">
Simple example with options in HTML
</a>
</li>
<li class="md-nav__item">
<a href="#example-with-the-onready-function-and-options-in-the-constructor" class="md-nav__link">
Example with the onReady function and options in the constructor
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#load-youtube-api" class="md-nav__link">
Load Youtube API
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content">
<article class="md-content__inner md-typeset">
<a href="https://github.com/yoriiis/vlitejs/edit/master/docs/how-it-works.md" title="Edit this page" class="md-icon md-content__icon"></a>
<h1>How it works</h1>
<h2 id="html-structure">HTML structure<a class="headerlink" href="#html-structure" title="Permanent link">¶</a></h2>
<p>HTML5 and Youtube video players use the same minimalist structure with native HTML5 <code><video></code> tag.</p>
<div class="admonition warning">
<p class="admonition-title">HTML</p>
<p>Each video players must have inevitably a <strong>unique id</strong>.</p>
</div>
<h3 id="html5-video">HTML5 video<a class="headerlink" href="#html5-video" title="Permanent link">¶</a></h3>
<ul>
<li><code>{{idSelector}}</code> - Unique HTML id</li>
<li><code>{{videoSource}}</code> - Video path</li>
</ul>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="p"><</span><span class="nt">video</span> <span class="na">id</span><span class="o">=</span><span class="s">"{{idSelector}}"</span>
<span class="na">class</span><span class="o">=</span><span class="s">"vlite-js"</span>
<span class="na">src</span><span class="o">=</span><span class="s">"{{videoSource}}"</span><span class="p">></span>
<span class="p"></</span><span class="nt">video</span><span class="p">></span>
</pre></div>
</td></tr></table>
<h3 id="youtube-video">Youtube video<a class="headerlink" href="#youtube-video" title="Permanent link">¶</a></h3>
<ul>
<li><code>{{idSelector}}</code> - Unique HTML id</li>
<li><code>{{videoId}}</code> - Youtube video id</li>
</ul>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="p"><</span><span class="nt">video</span> <span class="na">id</span><span class="o">=</span><span class="s">"{{idSelector}}"</span>
<span class="na">class</span><span class="o">=</span><span class="s">"vlite-js"</span>
<span class="na">data-youtube-id</span><span class="o">=</span><span class="s">"{{videoId}}"</span><span class="p">></span>
<span class="p"></</span><span class="nt">video</span><span class="p">></span>
</pre></div>
</td></tr></table>
<h3 id="video-skin">Video skin<a class="headerlink" href="#video-skin" title="Permanent link">¶</a></h3>
<p><br /><p align="center" class="video-center">
<a href="https://yoriiis.github.io/vlitejs/demo" title="Demo" class="custom-button">
<img alt="Screenshot" src="images/demo2.jpg" />
</a>
</p></p>
<h2 id="options">Options<a class="headerlink" href="#options" title="Permanent link">¶</a></h2>
<p>Each video players has its own options object. For more flexibility, vLitejs accepts two possibilities for passed them.</p>
<h4 id="options-in-html">Options in HTML<a class="headerlink" href="#options-in-html" title="Permanent link">¶</a></h4>
<p>Options object must be a valid JSON and writes between single quotes in data attribute <code>data-options</code>.</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="p"><</span><span class="nt">video</span> <span class="na">id</span><span class="o">=</span><span class="s">"player"</span>
<span class="na">data-options</span><span class="o">=</span><span class="s">'{"autoplay": false, "controls": true}'</span><span class="p">></span>
<span class="p"></</span><span class="nt">video</span><span class="p">></span>
</pre></div>
</td></tr></table>
<h4 id="option-in-javascript-constructor">Option in Javascript constructor<a class="headerlink" href="#option-in-javascript-constructor" title="Permanent link">¶</a></h4>
<p>Options object passed to the constructor.</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5
6</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="k">new</span> <span class="nx">vlitejs</span><span class="p">({</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">autoplay</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">controls</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
</td></tr></table>
<div class="admonition warning">
<p class="admonition-title">Only one or the other</p>
<p>Don't pass options in the HTML in adition to Javascript constructor. If you choose to do it, there will be a <strong>conflict</strong>, and the priority will be given to options pass by the data attribute <code>data-options</code> in the HTML.</p>
</div>
<h4 id="available-options">Available options<a class="headerlink" href="#available-options" title="Permanent link">¶</a></h4>
<p>List of all options with their default values.</p>
<h4 id="autoplay"><code>autoplay</code><a class="headerlink" href="#autoplay" title="Permanent link">¶</a></h4>
<p><code>default: boolean = false</code></p>
<p>Tells vLitejs whether to enable the autoplay of the video.</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="k">new</span> <span class="nx">vlitejs</span><span class="p">({</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">autoplay</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
</td></tr></table>
<h4 id="controls"><code>controls</code><a class="headerlink" href="#controls" title="Permanent link">¶</a></h4>
<p><code>default: boolean = true</code></p>
<p>Tells vLitejs whether to display the control bar of the video.</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="k">new</span> <span class="nx">vlitejs</span><span class="p">({</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">controls</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
</td></tr></table>
<h4 id="playpause"><code>playPause</code><a class="headerlink" href="#playpause" title="Permanent link">¶</a></h4>
<p><code>default: boolean = true</code></p>
<p>Tells vLitejs whether to display the play/pause button on the control bar.</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="k">new</span> <span class="nx">vlitejs</span><span class="p">({</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">playPause</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
</td></tr></table>
<h4 id="time"><code>time</code><a class="headerlink" href="#time" title="Permanent link">¶</a></h4>
<p><code>default: boolean = true</code></p>
<p>Tells vLitejs whether to display the time information on the control bar.</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="k">new</span> <span class="nx">vlitejs</span><span class="p">({</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">time</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
</td></tr></table>
<h4 id="progressbar"><code>progressBar</code><a class="headerlink" href="#progressbar" title="Permanent link">¶</a></h4>
<p><code>default: boolean = true</code></p>
<p>Tells vLitejs whether to display the progress bar on the control bar.</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="k">new</span> <span class="nx">vlitejs</span><span class="p">({</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">progressBar</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
</td></tr></table>
<h4 id="volume"><code>volume</code><a class="headerlink" href="#volume" title="Permanent link">¶</a></h4>
<p><code>default: boolean = true</code></p>
<p>Tells vLitejs whether to display the volume button on the control bar.</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="k">new</span> <span class="nx">vlitejs</span><span class="p">({</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">volume</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
</td></tr></table>
<h4 id="fullscreen"><code>fullscreen</code><a class="headerlink" href="#fullscreen" title="Permanent link">¶</a></h4>
<p><code>default: boolean = true</code></p>
<p>Tells vLitejs whether to display the fullscreen button on the control bar.</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="k">new</span> <span class="nx">vlitejs</span><span class="p">({</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">fullscreen</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
</td></tr></table>
<h4 id="poster"><code>poster</code><a class="headerlink" href="#poster" title="Permanent link">¶</a></h4>
<p><code>default: null</code></p>
<p>Tells vLitejs whether to personalize the poster url of the video.</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="k">new</span> <span class="nx">vlitejs</span><span class="p">({</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">poster</span><span class="o">:</span> <span class="s1">'poster.jpg'</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
</td></tr></table>
<h4 id="bigplay"><code>bigPlay</code><a class="headerlink" href="#bigplay" title="Permanent link">¶</a></h4>
<p><code>default: boolean = true</code></p>
<p>Tells vLitejs whether to display the big play button on the video.</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="k">new</span> <span class="nx">vlitejs</span><span class="p">({</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">bigPlay</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
</td></tr></table>
<h4 id="autohide"><code>autoHide</code><a class="headerlink" href="#autohide" title="Permanent link">¶</a></h4>
<p><code>default: boolean = false</code></p>
<p>Tells vLitejs whether to hide the control bar if the user is inactive (delay 3000ms).</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="k">new</span> <span class="nx">vlitejs</span><span class="p">({</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">autoHide</span><span class="o">:</span> <span class="kc">false</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
</td></tr></table>
<h4 id="nativecontrolsfortouch"><code>nativeControlsForTouch</code><a class="headerlink" href="#nativecontrolsfortouch" title="Permanent link">¶</a></h4>
<p><code>default: boolean = false</code></p>
<p>Tells vLitejs whether to keep native controls for touch devices.</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="k">new</span> <span class="nx">vlitejs</span><span class="p">({</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">nativeControlsForTouch</span><span class="o">:</span> <span class="kc">false</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
</td></tr></table>
<h2 id="instantiation">Instantiation<a class="headerlink" href="#instantiation" title="Permanent link">¶</a></h2>
<p>The vLitejs class accept an object as parameter with 3 keys:</p>
<ul>
<li><code>selector</code> - Selector of the video element (mandatory)</li>
<li><code>options</code> - Object of options (optional)</li>
<li><code>onReady</code> - Callback function (optional)</li>
</ul>
<div class="admonition info">
<p class="admonition-title">Selector</p>
<p>The selector can be a string with unique identifier or an HTML element with <code>document.querySelector('#player')</code>.</p>
</div>
<h4 id="simple-example-with-options-in-html">Simple example with options in HTML<a class="headerlink" href="#simple-example-with-options-in-html" title="Permanent link">¶</a></h4>
<p>The simplest way to use vLitejs is like the example below. All default options are used except the <code>poster</code> was override by <code>data-options</code>.</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="p"><</span><span class="nt">video</span> <span class="na">id</span><span class="o">=</span><span class="s">"{{idSelector}}"</span>
<span class="na">class</span><span class="o">=</span><span class="s">"vlite-js"</span>
<span class="na">src</span><span class="o">=</span><span class="s">"{{videoSource}}"</span>
<span class="na">data-options</span><span class="o">=</span><span class="s">'{"poster": "poster.jpg"}'</span><span class="p">></span>
<span class="p"></</span><span class="nt">video</span><span class="p">></span>
</pre></div>
</td></tr></table>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="k">new</span> <span class="nx">vlitejs</span><span class="p">({</span>
<span class="nx">selector</span><span class="o">:</span> <span class="s1">'#player'</span>
<span class="p">});</span>
</pre></div>
</td></tr></table>
<h4 id="example-with-the-onready-function-and-options-in-the-constructor">Example with the onReady function and options in the constructor<a class="headerlink" href="#example-with-the-onready-function-and-options-in-the-constructor" title="Permanent link">¶</a></h4>
<p>The <code>onReady</code> function is called when the current player is instanciated and ready. The function expose the <code>player</code> instance.</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="p"><</span><span class="nt">video</span> <span class="na">id</span><span class="o">=</span><span class="s">"{{idSelector}}"</span>
<span class="na">class</span><span class="o">=</span><span class="s">"vlite-js"</span>
<span class="na">data-youtube-id</span><span class="o">=</span><span class="s">"{{videoId}}"</span><span class="p">></span>
<span class="p"></</span><span class="nt">video</span><span class="p">></span>
</pre></div>
</td></tr></table>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5
6
7
8
9</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="k">new</span> <span class="nx">vlitejs</span><span class="p">({</span>
<span class="nx">selector</span><span class="o">:</span> <span class="s1">'#player'</span><span class="p">,</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
<span class="s2">"poster"</span><span class="o">:</span> <span class="s2">"poster.jpg"</span>
<span class="p">},</span>
<span class="nx">onReady</span><span class="o">:</span> <span class="p">(</span><span class="nx">player</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
<span class="c1">//Ready</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
</td></tr></table>
<h2 id="load-youtube-api">Load Youtube API<a class="headerlink" href="#load-youtube-api" title="Permanent link">¶</a></h2>
<p>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.</p>
<script>
((window.gitter = {}).chat = {}).options = {
room: 'vlitejs/vlitejs'
};
</script>
<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
</article>
</div>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid">
<a href="getting-started.html" title="Getting started" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-back md-footer-nav__button"></i>
</div>
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
Previous
</span>
Getting started
</span>
</div>
</a>
<a href="available-methods.html" title="Available methods" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
Next
</span>
Available methods
</span>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-forward md-footer-nav__button"></i>
</div>
</a>
</nav>
</div>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-footer-copyright">
<div class="md-footer-copyright__highlight">
Copyright © 2019 - Joris DANIEL aka Yoriiis
</div>
powered by
<a href="https://www.mkdocs.org">MkDocs</a>
and
<a href="https://squidfunk.github.io/mkdocs-material/">
Material for MkDocs</a>
</div>
<div class="md-footer-social">
<link rel="stylesheet" href="assets/fonts/font-awesome.css">
<a href="https://github.com/yoriiis" class="md-footer-social__link fa fa-github"></a>
<a href="https://www.linkedin.com/in/jorisdaniel" class="md-footer-social__link fa fa-linkedin"></a>
</div>
</div>
</div>
</footer>
</div>
<script src="assets/javascripts/application.ac79c3b0.js"></script>
<script>app.initialize({version:"1.0.4",url:{base:"."}})</script>
</body>
</html>