Displays text watermark over the VideoJS player and updates the position dynamically.
npm install videojs-dynamic-watermark
- videojs-dynamic-watermark
- Table of Contents
- Installation
- Installation
- Plugin Options
- Default options
- Options
- Usage
- Tag
- Browserify/CommonJS
- RequireJS/AMD
- License
Displays text watermark over the VideoJS player and updates the position dynamically.
- Installation
- Plugin Options
- Default options
- Options
- Usage
- Tag
- Browserify/CommonJS
- RequireJS/AMD
- License
``sh`
npm install --save videojs-dynamic-watermark
`js
{
elementId: 'unique-id',
watermarkText: 'sbbullet',
changeDuration: 1000,
cssText: 'display: inline-block; color: grey; background-color: transparent; font-size: 1rem; z-index: 9999; position: absolute; @media only screen and (max-width: 992px){font-size: 0.8rem;}'
}
`
- _elementId_ string Unique id to be used as the id attribute of watermark element. Must be unique in the DOM.string
- _watermarkText_ Watermark text contentint
- _changeDuration_ Milliseconds after which the position of watermark is changed. FYI 1000 milliseconds = 1 secondstring
- _cssText_ CSS style properties to be used for the watermark. Tweak the look and feel of the watermark text as you wish using CSS
To include videojs-dynamic-watermark on your website or web application, use any of the following methods.
This is the simplest case. Get the script in whatever way you prefer and include the plugin _after_ you include [video.js][videojs], so that the videojs global is available.
_With Default Options_
`html`
_With Custom Options_
`html`
_Using image or other elements_
You can use image, svg or any other HTML element like a button (which if clicked goes to some url) as your watermark content simply by this tricky hack.
`html`
When using with Browserify, install videojs-dynamic-watermark via npm and require the plugin as you would any other module.
`js
var videojs = require("video.js");
// The actual plugin function is exported by this module, but it is also
// attached to the Player.prototype; so, there is no need to assign it
// to a variable.
require("videojs-dynamic-watermark");
var player = videojs("my-video");
player.dynamicWatermark();
`
When using with RequireJS (or another AMD library), get the script in whatever way you prefer and require the plugin as you normally would:
`js
require(["video.js", "videojs-dynamic-watermark"], function (videojs) {
var player = videojs("my-video");
player.dynamicWatermark();
});
``
MIT. Copyright (c) Santosh Bhattarai <mr.bullet.sb@gmail.com>
[videojs]: http://videojs.com/