视频动态滚动水印制作，滚动的水印字幕

先看整体效果

需求分析：

①要求水印每隔10秒钟出现一次

②水印每次出现的高度为随机值

②切换全屏也是一样

那么我们字幕可以给水印定位，然后充分用到定时器改变left值来完成

shuiyin() {// 获取屏幕宽和高var windowWidth = wx.getSystemInfoSync().windowWidthvar screenHeight = wx.getSystemInfoSync().screenHeightconsole.log('屏幕宽和高',windowWidth, screenHeight);clearInterval(this.data.test_left);var flag = true; // 切换条件var start = 0; // 起始值let that = this;// 获取动态水印显示什么内容let nickName = wx.getStorageSync("userInfo").nickName;let phone = wx.getStorageSync("phone") || "";const date = new Date();const y = date.getFullYear();let m = date.getMonth() + 1;m = m < 10 ? `0${m}` : m;let d = date.getDate();d = d < 10 ? `0${d}` : d;let _timer = y + "-" + m + "-" + d;// 判断是否是全屏状态来确定水印要运行的宽度if (!that.data.controls_fullScreen) {var num = windowWidth; // 加到屏幕宽度最大值(非全屏)var _zNnm = Math.floor(Math.random() * (200 - 20 + 1)) + 10 // 随机高度} else {var num = screenHeight; // 全屏状态下手机高度就是水印要走的宽度var _zNnm = Math.floor(Math.random() * ((windowWidth - 50) - 20 + 1)) + 10;}function test() {if (flag) {++start;// 水印滚到了屏幕的最边界处停止滚动，并且计时10秒if (start == num) {flag = false;clearInterval(that.data.test_left)// 水印走完后开始计时10秒that._waterMark()}}that.setData({left: start,top: _zNnm,shuiying_cont: nickName + "-" + phone + "-" + _timer,});}this.data.test_left = setInterval(function () {test(); // 每秒刷新30帧}, 1000 / 30);
},

判断是否是全屏状态

// 微信小程序video组件内部方法，监听是否全屏
bindfullscreenchange(e) {console.log(e.detail.detail.fullScreen);let fullScreen = e.detail.detail.fullScreen; //值true为进入全屏，false为退出全屏if (!fullScreen) {//退出全屏this.setData({controls_fullScreen: false,});} else {//进入全屏this.setData({controls_fullScreen: true,});}this.shuiyin();
},

计时每隔10秒种出现一次水印

// 每隔10秒重新调用一次水印_waterMark() {setTimeout(()=> {this.shuiyin() },10000) },

性能问题

此水印采用定时器每秒刷新30帧，性能消耗非常大，可能导致页面卡顿，体验很差

那么我们可以改良一下，丢弃定时器每秒刷新30帧，采用css动画来实现

实现思路。让每一次动画只执行完成一次就移除样式，js开始计时10秒重新添加当前动画样式，小编这里非全屏与动画保持一致 15秒后开始计时等待10秒下次出现的时间。全屏则为25秒后等动画结束开始等待10秒（与动画同步）

css部分

/* 非全屏状态下-15秒内匀速滚动完 */
.shuiyin_style {opacity: 0.45;white-space: nowrap;z-index: 998;position: absolute;color: #b9b8b8;font-size: 24rpx;animation: mymove 15s linear;/*Safari 和 Chrome:*/-webkit-animation: mymove 15s linear;
}/* 全屏状态下-25秒内匀速滚动完 */
.shuiyin_style_y {opacity: 0.45;white-space: nowrap;z-index: 998;position: absolute;color: #b9b8b8;font-size: 24rpx;animation: mymove 25s linear;/*Safari 和 Chrome:*/-webkit-animation: mymove 25s linear;
}/* 动画帧 */
@keyframes mymove {from {left: 0%}to {left: 100%}
}/*Safari 和 Chrome:*/
@-webkit-keyframes mymove {from {left: 0%}to {left: 100%}
}

wxml部分

<!-- 非全屏状态下 -->
<text wx:if="{{!controls_fullScreen}}" class="{{shuiyin_style_display == true ? 'shuiyin_style' : 'shuiyin_display'}}" style="top: {{top}}px;">{{shuiying_cont}}</text>
<!-- 全屏状态下 -->
<text wx:else="{{controls_fullScreen}}" class="{{shuiyin_style_display == true ? 'shuiyin_style_y' : 'shuiyin_display'}}" style="top: {{top}}px;">{{shuiying_cont}}</text>

js部分

shuiyin() {// 切换视频或者等先清除掉定时器 clearTimeout(this.data.__sy1)clearTimeout(this.data.__sy2)// 获取屏幕宽和高var windowWidth = wx.getSystemInfoSync().windowWidthvar screenHeight = wx.getSystemInfoSync().screenHeightconsole.log('屏幕宽和高', windowWidth,  screenHeight);let that = this;// 获取当前用户信息水印显示内容let nickName = wx.getStorageSync("userInfo").nickName;let phone = wx.getStorageSync("phone") || "";const date = new Date();const y = date.getFullYear();let m = date.getMonth() + 1;m = m < 10 ? `0${m}` : m;let d = date.getDate();d = d < 10 ? `0${d}` : d;let _timer = y + "-" + m + "-" + d;if (!that.data.controls_fullScreen) {var _zNnm = Math.floor(Math.random() * (200 - 20 + 1)) + 10} else {var _zNnm = Math.floor(Math.random() * (( windowWidth - 50) - 20 + 1)) + 10;}that.setData({top: _zNnm,shuiying_cont: nickName + "-" + phone + "-" + _timer,shuiyin_style_display: true});if (!this.data.controls_fullScreen) { // 非全屏下调用this.data.__sy1 = setTimeout(()=> { that.setData({shuiyin_style_display: false},()=>{console.log("开始计时下次水印出现的时间~非全屏");that._waterMark()});},15000) } else { //全屏下调用this.data.__sy1 = setTimeout(()=> {that.setData({shuiyin_style_display: false},()=>{console.log("开始计时下次水印出现的时间~全屏");that._waterMark()});},25000) }},_waterMark() {this.data.__sy2 = setTimeout(()=> {this.shuiyin()},10000) },

结束语

至此两种实现方式就完成了，css实现的效果性能要比定时器性能提升一倍不止，而且丝滑流畅

在h5网页端缺点（微信小程序较完美）

倘若再 h5端 ios全屏下，水印层级权限过低，导致无法显示，（微信小程序较完美）有解决办法还请积极留言~

视频动态滚动水印制作，滚动的水印字幕相关推荐

marquee滚动起始位置_巧用喵影关键帧制作滚动水印，让视频小偷无可盗
视频创作者最奔溃瞬间,不是翻遍了所有网站还找不到合适的素材,也不是作品快完成了却发现电脑死机,而是自己呕心沥血做出来的视频被盗了,结果盗版视频的播放量还更高!! 理想的解决方法就是给视频打上水印. ...
html滚动字幕如何控制位置,怎么制作滚动字幕在视频任意位置加动态广告字幕控制字幕动画的时间...
又到周五啦,真是开心!这周日是母亲节哟,大家有没有给妈妈准备什么惊喜呢?乘着周末,记得回家多跟家人聊聊,或者打电话问候几句哟!还可以制作一个自己的视频发给妈妈,她一定会特别高兴的!在我们的狸窝家园有很 ...
DikDik（视频水印添加软件）官方中文版V4.3.0.0 | 影音转霸2021 | 音频水印制作软件
DikDik是一款优秀易用的专业视频水印添加软件和音频水印制作软件,中文名叫影音转霸,可以在所见即所得的为指定视频添加视频.音频.图像.单词和字幕,还可以设置诸如视频.音频.图像.文本多种水印和.sr ...
DikDik（视频水印添加软件）官方中文版V4.2.0.0 | 影音转霸2021版下载 | 极品音频水印制作软件
DikDik是一款优秀易用的专业视频水印添加软件和音频水印制作软件,中文名叫影音转霸,可以在所见即所得的为指定视频添加视频.音频.图像.单词和字幕,还可以设置诸如视频.音频.图像.文本多种水印和.sr ...
html 滚动字幕如何设置,如何制作滚动字幕视频画面加滚动字幕，自己设置滚动字幕的显示时间（滚动次数）...
不管是电影还是电视中都经常会出现一些滚动字幕,滚动字幕的内容可以是广告.通知.说明.或者是总结等.视频中的滚动字幕除了起到宣传或提示的作用,更重要的是丰富了视频的层次,让画面更加精美.但有时候我们自己 ...
动态水印跟踪去除_视频动态水印如何去除视频中不定时出现的图片加文字广告如何尽量模糊处理...
『狸窝是帮助用户解决问题提供教程解决方案在这个过程中有使用我们自己开发的软件也有网上找的工具只要帮助用户解决问题就好!』离别真是个伤感的事情,每天都走人来来去去,每天也都有人走走停停,当离别 ...
无水印的html5制作软件,无水印剪辑视频
无水印剪辑视频是一款火爆的视频编辑软件,每一个功能都有着详细的操作说明,就算你是新手小白也能快速上手制作视频.超多酷炫的特效,海量的剪辑素材,不同的视频模板,让你能轻松的制作出各种各样的视频,如果你也 ...
视频如何制作滚动字幕，用这个软件轻松搞定
很多小伙伴都在问有没有简单的方法,可以在多个视频中添加滚动字幕,今天小编就给大家安利一个可以轻松操作的方法,下面就一起来看看具体的操作步骤吧! 第一步,运行[媒体梦工厂]在软件主页中有七种视频剪辑功能 ...
Windows怎么把视频变成GIF，动态图怎么制作
GIF是近年来比较火爆的,尤其是在聊天时使用较多,不仅可以活跃聊天的氛围,还可以增加感情,但是一般我们使用的都是这些社交工具中自带的,其实可以自己制作出属于自己的GIF,也可以将保存的短视频转为GIF ...
图片向上滚动字幕代码html,如何通过制作滚动字幕的软件实现这种片尾的向上滚动字幕效果...
如何制作滚动字幕特殊滚动类字幕制作向上向下向左向右滚动字幕制作效果含拖动和消失全程真是酷B了爽呆了,赶快学习吧! 电影.连续剧等影视作品片尾,都会在播放片尾曲时,出现向上滚动的字幕,显示演员表 ...