video.js插件全屏水印消失问题

最新推荐文章于 2024-09-25 07:30:34 发布
最新推荐文章于 2024-09-25 07:30:34 发布
阅读量173 收藏
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shangyupeng_/article/details/141711842
版权

最近项目中要求文件预览要添加水印,但是视频全屏的时候会调用浏览器的方法将视频置顶在最顶层,然后水印被遮挡,各种调层级不管用
在这里插入图片描述
不全屏还好能正常显示,一旦全屏

全屏无水印

这个是在video.js的基础上修改的,如果项目里已有videojs的话,只需引入一两个文件就可以,我是在demo的基础上做了一些改动,没有使用videojs.watermark.css,由于项目本身就是用video.js插件,最后只引入了一个video.js文件
在这里插入图片描述
videojs-waterMark.html是demo我做了修改之后的文件,由于不具有通用性我就不展示代码了,最后实现的效果是,只需传入视频的src和要显示的水印文本就可以视频全屏显示水印.效果如图

水印视频

楚天阔.
关注
videojs-watermark:一个videojs插件，可向videojs播放器添加水印
05-28
不再保留此副本！ 如果您有兴趣维护它，请写信给 。 videojs-watermark 在视频播放器中添加水印图像。 在初始“ fadeTime”之后，当显示视频播放器控件时，将显示水印。 这也提供了使用水印作为链接的能力。 安装 npm install --save videojs-watermark 配置 image：必填要用作水印的图像的URL。 position：放置水印的位置（左上，右上，左下，右下）。 默认为“右上”。 fadeTime：初始水印淡入的时间（以毫秒为单位）。 默认值为3000。要使水印永久可见，请使用null 。 url：从水印链接到的URL。 如果用户单击水印，视频将被暂停，并且链接将在新窗口中打开。 用法 要将videojs-watermark包含在您的网站或Web应用程序中，请使用以下任何一种方法。 [removed]标记 这是最简单的情况。 以您喜
videojs-watermark:一个videoJS插件，用于在视频上显示水印
05-14
Video.js水印 一个插件通过在视频顶部显示一个watermak。 使用插件 当您在页面中包含“ videojs.watermark.js”时，该插件会自动注册： [removed][removed] 您可能也想包括默认样式表。 它可以处理在视频上显示图像的操作： <link href="videojs.watermark.css" rel="stylesheet"> 创建视频元素后，即可激活水印插件。 该插件有5个选项file和xpos以及ypos and xrepeat和opacity。 它使用CSS在视频上显示图像。 video.watermark({ file: 'watermarks.png', xpos: 50, ypos: 50, xrepeat: 0, opacity:
video视频在全屏播放也能添加水印
M_yI_Hg的博客
05-19 1559
这边需要注意的是: 必须追加到和video同级的父盒子里哦, 不然显示会有问题, 切记切记切记。追加到和video同级的父盒子。使用画布创建一个背景图片,创建一个div设置背景图片。好的, 先看下效果图。
videojs-dynamic-watermark: video.js 视频添加文字水印
weixin_42490897的博客
06-15 2698
videojs-dynamic-watermark: video.js 视频添加文字水印，随机移动
H5 video 标签播放视频记录播放进度
wangxinaz的博客
09-30 9425
&lt;%@ page contentType="text/html;charset=UTF-8" %&gt; &lt;%@ include file="/webpage/include/taglib.jsp"%&gt; &lt;!DOCTYPE html&gt; &lt;html&gt;   &lt;head&gt;     &lt;title&gt;MyHtml.htm
Video.js 水印插件：为您的视频增添专业标识
最新发布
gitblog_00536的博客
09-25 586
Video.js 水印插件：为您的视频增添专业标识 videojs-watermark A videoJS plugin to display a watermark over the video 项目地址: https://gi...
前端视频加水印
思渝崖
12-06 3991
video.js,watermark,视频水印
video增加水印，全屏不遮挡
Jeremy Liu的博客
02-09 2256
但是使用video播放器自带的全屏按钮全屏时，水印图层不显示，这是因为播放器自带的全屏按钮全屏时仅将当前video标签全屏，并置于页面最顶层。无法通过z-index修改层级；
关于video.js在IE下作为背景页面全屏的问题
weixin_46514100的博客
08-10 566
关于video.js在IE下作为背景页面全屏的问题，百度搜了很多答案都未解决，最后参考douyin官网把video标签的width:auto;height:100%解决了，如果不需要兼容IE使用object-fit: fill或者cover都可以。如果还未解决可以去参考有页面背景全屏的网站比如上面提到的douyin。记录一下，希望能帮助到你。 ...
videojs动态封面_videojs-watermark
weixin_42701915的博客
01-12 1002
Video.js WatermarkA plugin display a watermak on top of the video with Video.js.Using the PluginThe plugin automatically registers itself when you include 'videojs.watermark.js' in your page:You proba...
水印js插件
10-17
实现水印效果，防止盗版。实现水印效果，防止盗版实现水印效果，防止盗版实现水印效果，防止盗版
分享一个我平时在用的播放器插件videojs
11-30
videoJS 算上是一款主流的播放器插件，比较强大，可以设置封面等等，兼容性好。网上的demo都是调用了第三方的视频文件，这个版本是完完全全的本地文件。
前端页面加水印watermark.js
01-11
不影响原有的点击或选中事件 watermark({ watermark_txt: ‘水印文字’,watermark_id:‘需要加水印的标签id’});
watermark.js生成文字水印或图片水印
07-08
生成文字水印或者是图片水印，需求是可预览水印，水印文字可自行赋值，图片可自己上传进行赋值就可，如果要添加其他种类水印，在watermarkjs里可自行添加测试，从其他博客找的进行了修改
水印管家 - watermark-remover.exe
06-12
watermark-remover （水印管家）是一款多平台（Windows、macOS、Online）支持，操作简单，处理快速的图片和视频去水印工具。经朋友推荐亲身体验后，发现其支持批量文件处理，对简单背景下的图片或者视频处理效果极好，复杂背景下，综合处理效果和处理过程复杂度来说，与同类产品相比也不遑多让。推荐大家试试！
外观可自定义的HTML5视频播放器Video.Js源码.zip
11-21
Video.js通过JavaScript和CSS实现了对<video>元素的增强，提供了一套完整的用户界面，包括播放/暂停按钮、进度条、音量控制、全屏切换等功能，并且支持跨浏览器兼容性，确保在不同的设备和浏览器上都能得到一致的...
全屏视频背景插件
06-01
`bideo.js`和`main.js`都是JavaScript文件，它们包含了实现全屏视频背景插件的核心代码。`bideo.js`可能包含了视频操作的基本功能，而`main.js`可能处理更复杂的逻辑，如全屏切换、视频流加载优化等。 `play.png`和...
video.js 在线测试
12-17
接着可以通过 JavaScript 脚本来初始化播放器并且配置各种参数，例如自定义控制栏、添加水印、设置播放速度等。在网页加载完毕后，点击播放按钮即可开始测试播放器的功能和效果。这时可以尝试播放、暂停、调整音量、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值