VideoPlayer

Setup

To set up, here is the code

import {startup, VideoPlayer} from 'js/es6/mediaviewer.js';
startup(); //Loads up the library

/**
 * Generate a new video element
 * @param {String} container 
 * @param {{autoplay: boolean, preloaded: 'auto'|'metadata'|'none', controls: boolean, playlists:[...{poster: string, title:string, src: [...{quality: string|number, path: string}], tracks:[...{src: string, kind: string, srclang: string, label: string}]}], start: number, end: number, skipRate: number, embed: boolean}} config Configurations
 * @param {{}} styles Style configuration
 * @returns {Video} return the video element
 * @param {boolean} [trigger=true] Active the event
 */
const tracks = [{
    src:'tracks/chapters.vtt',
    kind: 'chapters',
    srclang: 'en',
    label: 'English'
},{
    src: 'tracks/en-US.vtt',
    kind: 'subtitles',
    srclang: 'en',
    label: 'English'
},{
    src: 'tracks/de-DE.vtt',
    kind: 'subtitles',
    srclang: 'de',
    label: 'German'
}],
src = [{
    quality: 'auto',
    path: 'videos/demo.mp4'
},{
    quality: 144,
    path: 'videos/demo_144p.mp4'
},{
    quality: 1080,
    path: 'videos/demo_1080p.mp4'
}];
new VideoPlayer('.demo', {
// configurations
},
{
// CSS Carousel variables
});

Configurations

Label	Type	Values	Default	Description	Required
autoplay	Boolean	true, false	false	Automatically plays video on document click	✖️
preloaded	String	'auto', 'metadata', 'none'	auto	Adds a preload to the video	✖️
controls	Boolean	true, false	true	Adds controls	✖️
loop	Boolean	true, false	false	Loops video	✖️
playlists	Object[]		[]	Creates a playlists	✔️
playlists.poster	String			Poster for the video	✔️
playlists.title	String			Title for the video	✔️
playlists.src	Object[]		[]	Generate sources for the video	✔️
playlists.src.quality	String|Number			Quality of the video, use "auto" to set as default, else use numbers to generate the quality of the video	✔️
playlists.src.path	String			Video path that matches the quality	✔️
playlists.tracks	Object[]		[]	Generates tracks to the video	✖️
playlists.tracks.src	String			Path to use as a track	✖️
playlists.tracks.kind	String	captions, chapters, descriptions, metadata, subtitles		The type of track	✖️
playlists.tracks.srclang	String			Soruce language	✖️
playlists.tracks.label	String			Label the track	✖️
skipRate	Integer	+ ♾️	5	Skips the number of seconds based on left/right keys	✖️
embed	Boolean	true, false	false	Allows videos to be embedded by generating a URL for it	✖️

Styles

Variable	Name	Values	Default	Description
--video-progress-background	progress-background	Color	rgb(125, 125, 125, .85)	Progress background color
--video-progress	progress	Color	#ff0000	Video progress bar color
--video-controls-color	controls-color	Color	#fff	Color of video controls
--video-volume-thumb	volume-thumb	Color	#fff	Volume slider thumb color
--video-volume-border	volume-border	Color	transparent	Volume slider border color
--video-volume-track-before	volume-track-before	Color	#e7e7e7	Volume track before thumb color
--video-volume-track-after	volume-track-after	Color	#c8c8c8	Volume track after thumb color
--video-bg	bg	Color	#000	Video background color
--video-checkpoint	checkpoint	Color	rgba(195, 195, 195, 0.85)	Checkpoint overlay color
--video-buffer	buffer	Color	rgba(151, 154, 154, 0.85)	Buffer bar color
--video-autoplay-checked	autoplay-checked	Color	rgb(151, 154, 154)	Autoplay checkbox checked state color
--video-autoplay-bg	autoplay-bg	Color	rgba(151, 154, 154, 0.5)	Autoplay background color
--video-autoplay-thumb	autoplay-thumb	Color	#fff	Autoplay thumb color
--video-cc-active	cc-active	Color	#ff0000	Closed caption active color
--video-preview-timestamp	preview-timestamp	Color	#fff	Preview timestamp color
--video-settings-bg	settings-bg	Color	rgba(35, 35, 35, 0.75)	Settings menu background color
--video-settings-color	settings-color	Color	#fff	Settings menu text color
--video-settings-hover	settings-hover	Color	rgba(172, 172, 172, 0.86)	Settings hover color
--video-pip-overlay	pip-overlay	Color	rgba(62, 62, 62, 0.45)	PiP overlay color
--video-pip-overlay-color	pip-overlay-color	Color	#fff	PiP overlay text color
--video-playlist	playlist	Color	rgba(0,0,0,0.85)	Playlist background color
--video-playlist-time	playlist-time	Color	#fff	Playlist time text color
--video-playlist-time-bg	playlist-time-bg	Color	rgba(0,0,0,0.85)	Playlist time background color
--video-error-bg	error-bg	Color	#000	Error message background color
--video-error-color	error-color	Color	#fff	Error message text color
--video-title-color	title-color	Color	#fefefe	Video title text color

HTML

To operate in HTML, use the following code

<!--Replace ... with any of the valid configurations-->
<div media-video-player controls>
    <playlists>
        <videoplayer title="Big Buck Bunny" data-author="Blender Foundation" ...>
            <video src="videos/demo.mp4" data-quality="auto" ...></video>
            <video src="videos/demo_1080p.mp4" data-quality="1080" ...></video>
            <video src="videos/demo_144p.mp4" data-quality="144" ...></video>
            <track src="tracks/en-US.vtt" kind="subtitles" srclang="en" label="English" ...></track>
            <track src="tracks/de-DE.vtt" kind="subtitles" srclang="de" label="German" ...></track>
            <track src="tracks/chapters.vtt" kind="chapters" srclang="en" label="English" ...></track>
        </videoplayer>
        <videoplayer title="Electric Callboy - Everytime We Touch (TEKKNO Version) OFFICIAL VIDEO" data-author="Electric Callboy" ...>
            <video src="videos/video2.mp4"></video>
        </videoplayer>
    </playlists>
</div>
<script type="module" src="autoloader.js"></script>