水印video.js播放器的最明智的方式

我们正在将我们的播放器从Flowplayer迁移到Video.js。 在我们目前的Flowplayer安装中,我们使用一个选项在视频中添加水印:

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

这是在Video.js中复制此行为的最佳方法?

理想情况下,解决方案将会是我们已经尝试过的CSS(使用z-index更高的上层背景)但是当您进入全屏时,水印会丢失,

任何想法? 提前致谢


HTML / CSS解决方案应该可以工作,如果您可以在DOM层次结构中的相同级别添加元素作为<video>标签,它看起来仍然会以全屏模式显示。 您可能必须更改CSS才能使水印以您希望的方式显示,具体取决于是否启用全屏,但您可以观看视频元素的大小以检测该水印。 我可以通过在video.js网站上编辑DOM(我刚刚在<video>之前添加<h1>来实现此目的:

http://imgur.com/a/ABItT


我为videojs编写了一个插件,它将覆盖具有可配置不透明度和可选href的图像。 它可能适合您的需求

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


已经有一个来自videojs的插件,即使您想全屏观看,它也会保留徽标。 您也可以更改徽标的位置。

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

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

上一篇: Smartest way to Watermark video.js Player

下一篇: deserialize lazy loading in hibernate and jackson