A plugin for clappr which will display markers (and tooltips) at configured points scrub bar.
Add both Clappr and the markers plugin scripts to your HTML:
<head>
<script type="text/javascript" src="https://cdn.clappr.io/latest/clappr.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr-markers-plugin@latest/dist/clappr-markers-plugin.js"></script>
</head>You can also find the project on npm: https://www.npmjs.com/package/clappr-markers-plugin
Then just add ClapprMarkersPlugin into the list of plugins of your player instance, and the options for the plugin go in the markersPlugin property as shown below.
var player = new Clappr.Player({
source: "https://your.video/here.mp4",
plugins: {
core: [ClapprMarkersPlugin]
},
markersPlugin: {
markers: [
new ClapprMarkersPlugin.StandardMarker(0, "The beginning!"),
new ClapprMarkersPlugin.StandardMarker(90, "Something interesting."),
new ClapprMarkersPlugin.StandardMarker(450, "The conclusion.")
],
tooltipBottomMargin: 17 // optional
}
});The first paramater to StandardMarker is the time in seconds that the marker represents, and the second is the message to be displayed on the tooltip when the user hovers over the marker, and is optional.
The tooltipBottomMargin option is optional and specifies the amount of space below tooltips. It defaults to 17.
You can customise both the marker and the tooltip by extending the ClapprMarkersPlugin.Marker class. Look at the comments in that file for details.
ImageMarker works in the same way as StandardMarker, but the second parameter is a url to an image to show in the tooltip.
You can update the time of a marker by calling the setTime() method on StandardMarker.
You can add a marker programatically by using the addMarker() method. To remove a marker use the removeMarker() method and provide the instance to the Marker to remove as the first argument. To remove all markers use the clearMarkers() method.
To run the demo start a web server with the root directory being the root of this repo, and then browse to the "index.html" file in the "demo" folder.
I am also hosting a demo at https://tjenkinson.me/clappr-markers-plugin/
When submitting a PR please don't include changes to the dist folder.
Install dependencies:
npm install
Build:
npm run build
Minified version:
npm run release