水印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