Configuration

Html Structure & Attributes

All attributes not required, exclude wrapper classname.

<div
class="cleanPlayer" // wrapper classname
boxshadow="false" // add box shadow
borderradius="false" // add border radius
theme="blue" // theme variant [light, dark, blue, red, green, pink]
hideplaylist="false" // hide playlist
playlistheight="200" // add scroll if playlist height large than this value
enabled="true" // enable / disable initialisation
ratio="16:9" // video ratio
autoplay="false" // autolpay after load
hidecontrols="true" // hide controls after 5 seconds
tooltips="true" // switch tooltips on controls buttons
inverttime="true" // invert time counter
ads="" // vi.ai key
>
<!-- AUDIO TRACK -->
<audio
title="" // title
descr="" // playlist additional description
download // show download link
>
<source
type="audio/mp3" // source type
src="" // source path
></source>
</audio>
<!-- VIDEO TRACK -->
<video
title="" // title
descr="" // playlist additional description
poster="" // poster source path
download // show download link
>
<source
type="video/mp4" // source type
size="" // set size for quality control
>
</source>
<track
default // set default track
label="English" // label for controls
srclang="en" // lang
src="" // track source path
></track>
</video>
<!-- YOUTUBE OR VIMEO -->
<video>
<source
provider="youtube" // youtube or vimeo provider
src="" // youtube or vimeo video url / id
>
</video>
</div>

Examples

See Examples Section.

Alternative JS Initialisation Parameters (Optional)

Selector argument should be:

<script>
new CleanPlayer(selectorArgument, cleanPlayerOptions, plyrOptions);
</script>
cleanPlayerOptions
// clean html player options object, by default this set as:
var cleanPlayerOptions = {
hidePlaylist: false,
playlistHeight: "auto",
boxShadow: false,
borderRadius: false,
theme: "light"
}
plyrOptions
// plyr.io options object, by default this set as:
var plyrOptions = {
enabled: true,
ratio: "16:9",
autoplay: false,
volume: 1,
hideControls: true,
tooltips: { controls: true, seek: true },
invertTime: true,
ads: { enabled: false, publisherId: "" },
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']
}