Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/datarhei/clappr-info-button-plugin
Info Button plugin for Clappr player
https://github.com/datarhei/clappr-info-button-plugin
clappr clappr-plugin
Last synced: about 2 months ago
JSON representation
Info Button plugin for Clappr player
- Host: GitHub
- URL: https://github.com/datarhei/clappr-info-button-plugin
- Owner: datarhei
- License: mit
- Created: 2018-07-20T12:38:18.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T02:47:13.000Z (almost 2 years ago)
- Last Synced: 2023-11-11T11:37:51.476Z (about 1 year ago)
- Topics: clappr, clappr-plugin
- Language: JavaScript
- Size: 2.58 MB
- Stars: 0
- Watchers: 5
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Clappr Info Button Plugin
## Usage
Add both Clappr and Info Button plugin scripts to your HTML:
```html
```
Then just add `InfoButton` into the list of plugins of your player instance:
```javascript
var player = new Clappr.Player({
source: "http://your.video/here.m3u8",
plugins: [InfoButton]
});
```
You can also customize the button, options, and title:
```javascript
var player = new Clappr.Player({
source: "http://your.video/here.m3u8",
plugins: [InfoButton],
infoButtonConfig: {
button: {
image: 'info-button.png'
},
title: 'Info',
options: [
{label: 'About', link: 'https://github.com/datarhei/clappr-info-button-plugin'},
{label: 'Hello', link: function() { alert('Hello!'); }}
]
},
});
```
The provided links in the options will be openend in a new window/tab. If the link is a function, the function will be executed and no
new window/tab will be opened.
In order to support different languages, you have the possibility to provide translations for the info button. In `infoButtonConfig` you
add a `strings` object which has the locale of the language as key and an object with `title` and `options` as value, e.g. to provide
a German translation:
```javascript
var player = new Clappr.Player({
source: "http://your.video/here.m3u8",
plugins: [InfoButton],
infoButtonConfig: {
button: {
image: 'info-button.png'
},
title: 'Info',
options: [
{label: 'About', link: 'https://github.com/datarhei/clappr-info-button-plugin'},
],
strings: {
'de': {
title: 'Informationen',
options: [
{label: 'Über', link: 'https://github.com/datarhei/clappr-info-button-plugin'}
]
}
}
},
});
```
Instead of simply `de` you could use `de-DE`, but then this translation will only be used if the current locale matches exactly. With only `de`
all `de-*` variants will cause this translation to be used.
If a translation for the current locale is not found, the defaults (as given in `title` and `options`) will be used instead.
In case you want to override the language of the player, add the key `language` to `infoButtonConfig` with a matching locale from your provided
translations:
```javascript
var player = new Clappr.Player({
source: "http://your.video/here.m3u8",
plugins: [InfoButton],
infoButtonConfig: {
button: {
image: 'info-button.png'
},
title: 'Info',
options: [
{label: 'About', link: 'https://github.com/datarhei/clappr-info-button-plugin'},
],
language: 'de',
strings: {
'de': {
title: 'Informationen',
options: [
{label: 'Über', link: 'https://github.com/datarhei/clappr-info-button-plugin'}
]
}
}
},
});
```
## How to hack
Clone this repository
```bash
git clone https://github.com/datarhei/clappr-info-button-plugin.git
cd clappr-info-button-plugin
```
Install all dependencies
```bash
npm install
```
If something doesn't work, try to delete `node_modules` and `package-lock.json`.
Modify and build the code
```bash
# hack, hack, hack
# check the JS-syntax and fix it (optionally)
npm run lint
npm run lint:fix
# build the unminified version
npm run build
# build the minified version
npm run release
# find the builds in dist/
```