项目场景:
提示:视频加水印
思路是:新建一个水印图层盒子,水印图层飘在video上面; 水印使用canvas绘制,显示用户信息;
问题描述
但是使用video播放器自带的全屏按钮全屏时,水印图层不显示,无法通过z-index修改层级;
原因分析:
这是因为播放器自带的全屏按钮,仅将当前video标签全屏,并置于页面最顶层。默认全屏属性自带样式为 :not(root):fullscreen::backdrop
解决方案:
禁用掉video自带的全屏按钮,将水印与video置于一个父盒子中,自定义全屏按钮来实现将video父盒子全屏。
最后
以上就是会撒娇唇彩最近收集整理的关于video增加水印,全屏不遮挡项目场景:问题描述原因分析:解决方案:的全部内容,更多相关video增加水印内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复