Smartest way to Watermark video.js Player

we're migrating our player from Flowplayer to Video.js. In our current Flowplayer installation we do use an option to add a watermark over our videos:

flowplayer( .. , .. , {logo:{'url':'/path/to/watermark.png'}});

Which would be the best way to replicate this behavior in Video.js ?

Ideally the solution will be a CSS which we already tried (using a background in a upper layer with higher z-index) But that watermark gets lost when you go fullscreen,

Any idea? Thanks in advance

---

HTML/CSS solutions should work, if you can add an element at the same level in the DOM hierarchy as the <video> tag it looks like it will still appear in fullscreen mode. You may have to change the CSS to make the watermark appear the way you want it to depending on whether fullscreen is enabled or not, but you can watch the size of the video element to detect that. I was able to achieve this by editing the DOM on the video.js site (I just added an <h1> right before the <video> ):

http://imgur.com/a/ABItT

---

I wrote a plugin for videojs that'll overlay an image with a configurable opacity and optional href. It might work for your needs

https://github.com/funnyordie/videojs-imageOverlay

---

There is a plugin for that already from videojs and it keeps the logo even if you want to watch it full screen. Also you can change the position of your logo.

https://github.com/xbgmsharp/videojs-watermark

链接地址: http://www.djcxy.com/p/64694.html

上一篇: 应用程序在启动后立即崩溃

下一篇: 水印video.js播放器的最明智的方式