Getting Started

Installation

JS Version

Include the clean-html-player.js and clean-html-player.css files to head.

<head>
...
<link rel="stylesheet" href="path/to/clean-html-player.css">
<script src="path/to/clean-html-player.js"></script>
</head>

Wordpress Version

Upload zip archive with the Wordpress plugin to the plugins manager or upload unzipped folder to /wp-content/plugins/ and activate it in plugins manager.

Initialisation

Add code below to the page. Audio and Video tags should be wrapped in tag with cleanPlayer class for auto initialisation. Now your player is ready to go!

For configuration see Configuration section.

Examples:

Video with Playlist
<div class="cleanPlayer" boxshadow borderradius>
<video title="Duke Dumont - Ocean Drive" descr="YouTube Source" controls download>
<source provider="youtube" src="https://www.youtube.com/watch?v=KDxJlW6cxRk" />
</video>
<video title="Quality Settings & Captions Demo" descr="Mp4" poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg">
<source type="video/mp4" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" />
<track label="Fran├žais" srclang="fr" src="https://www.cleanhtmlplayer.com/cdn/video/media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt" />
</video>
</div>
Solo Audio with Dark Theme
<div class="cleanPlayer" theme="dark" borderradius>
<audio title="Shoutcast: 1.FM - 80s EURO" descr="Streaming Audio">
<source type="audio/mp3" src="http://sc2b-sjc.1.fm:8097/;" />
</audio>
</div>

In Wordpress use page editor in source mode

Alternative JS Initialisation (Optional)

For additional information see Configuration section.