xbgmsharp/videojs-watermark

A videoJS plugin to display a watermark over the video

Video.js Watermark

A plugin display a watermak on top of the video with Video.js.

Using the Plugin

The plugin automatically registers itself when you include 'videojs.watermark.js' in your page:

<script src='videojs.watermark.js'></script>

You probably want to include the default stylesheet, too. It handles showing the image over the video:

<link href="videojs.watermark.css" rel="stylesheet">

Once you have your video element created, you can activate the watermark plugin. The plugin take 5 options file and xpos and `yposandxrepeat`` and ``opacity``. It use the CSS show the image over the video.

video.watermark({
    file: 'watermarks.png',
    xpos: 50,
    ypos: 50,
    xrepeat: 0,
    opacity: 0.5,
});

or

data-setup='{ "plugins": { "watermark": { "file": "watermarks.png", "xpos": "50", "ypos": "50" } } }'

Center: xpos: 50 ypos: 50

Bottom right: xpos: 100 ypos: 100

Top left: xpos: 0 ypos: 0

Options

A few more options has been add to do cool stuff. Here are all the defaults settings.

  var defaults = {
        file: 'Owned_Stamp.png',
        xpos: 0,
        ypos: 0,
        xrepeat: 0,
        opacity: 100,
        clickable: false,
        url: "",
        className: 'vjs-watermark',
	text: false,
        debug: false
    }

Known Issues

It won't work when using the flash fallback.

Licence

The piwigo-videojs plugin for Piwigo is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

See http://www.gnu.org/licenses/gpl.html.

videojs-watermark's Issues

Want to add logo overlay in videojs

I am new in coding I try many way to add logo in video is but failed Checkout my code and please correct it

<title>videojs-contrib-hls embed</title> <script src="https://unpkg.com/video.js/dist/video.js"></script> <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>

<script> </script> <script src='videojs.watermark.js'></script>

var defaults = {
file: 'https://od.lk/s/ODZfNDM0NTg0NTdf/download.png',
xpos: 0,
ypos: 0,
xrepeat: 0,
opacity: 100,
clickable: false,
url: "",
className: 'vjs-watermark',
text: false,
debug: false
}

Wrong example code in README.md

In code example it is written:

video.zoomrotate{(

I believe it should be:

video.watermark{(

Watermark goes off video in full-screen on mobile

Hi,

Please see this video - https://www.dropbox.com/s/se8t4lejii7qzwe/s3mediavault.mp4?dl=0

Watermark goes off the video on mobile in full-screen mode.

Is there any way to make it stay on top of the actual video portion of it?

Thanks again for an amazing plugin for videojs.

• Ravi Jayagopal
  https://S3MediaVault.com

The example in your zip does not work at all ...

Wordpress integration

Is it possible to integrate into Wordpress?
I'm actually using VIDEOJS for video play, but I can't add watermark.

License

I do not see a license in the repo. May I use videojs-watermark in my own projects?

Integration of any Videojs Plugin in Angular2 ?

Hello there !
i am unable to integrate this videojs-watermark plugin in my angular2 project.
Is there any way to integrate this in angular2 ?
here is the code
var player= videojs('id1', {}, function() {
console.log("Working inside function ")

});
player.watermark();

player.watermark is not a function

I am trying to use the videojs-watermark npm module but the error which I am getting is - TypeError: player.watermark is not a function.

The code is as follows -

import React, { Component } from 'react';
import videojs from 'video.js';
import 'videojs-watermark';

class App extends Component {
componentDidMount(){
const player = videojs('my-player');
player.watermark({
file: 'watermark.png',
xpos: 50,
ypos: 50,
xrepeat: 0,
opacity: 0.5,
})
}

render() {
return (

<video
id="my-player"
class="video-js"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'

  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="http://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>
<script>
  
</script>
  </div>
);

}
}

export default App;

wrong example code

You have a mistake in example code. one "}" has to remove.