clappr-markers-plugin
Advanced tools
A plugin for clappr which will display markers at configured points scrub bar.
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="http://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: "http://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 http://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
FAQs
A plugin for clappr which will display markers at configured points scrub bar.
We found that clappr-markers-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.