Add the following script on your HTML:
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/clappr/clappr@latest/dist/clappr.min.js"></script>
</head>
Now, create the player:
<body>
<div id="player"></div>
<script>
var player = new Clappr.Player({source: "http://your.video/here.mp4", parentId: "#player"});
</script>
</body>
Test it at cdn.clappr.io.
You can use the latest published version at https://cdn.jsdelivr.net/gh/clappr/clappr@latest/dist/clappr.min.js
You can re-use some vendors used internally, for instance you can use Kibo
through Clappr.Vendor.Kibo
.
Clappr is under heavy development but production-ready. Feel free to open issues and send us pull requests.
![](https://raw.githubusercontent.com/clappr/clappr/master/images/thumbnails.jpg)
![](https://raw.githubusercontent.com/clappr/clappr/master/images/markers.jpg)
![](https://raw.githubusercontent.com/clappr/clappr/master/images/dash.jpg)
![](https://raw.githubusercontent.com/clappr/clappr/master/images/chromecast.jpg)
![](https://raw.githubusercontent.com/clappr/clappr/master/images/level-selector.jpg)
![](https://raw.githubusercontent.com/clappr/clappr/master/images/playback-rate-plugin.jpg)
![](https://raw.githubusercontent.com/clappr/clappr/master/images/bandwitdh.jpg)
![](https://raw.githubusercontent.com/clappr/clappr/master/images/stats.jpg)
![](https://raw.githubusercontent.com/clappr/clappr/master/images/youtube.jpg)
![](https://raw.githubusercontent.com/thiagopnts/clappr-video360/master/360.gif)
![](https://raw.githubusercontent.com/lucasrodcosta/clappr-nerd-stats/master/images/clappr-nerd-stats.png)