无需插件，每分钟在不同位置重新定位视频水印

Question

我想每隔一分钟更改一次水印在视频上的位置，例如在右上角，一分钟后在左上角，等等。在播放视频时这样的随机位置。我通过 CSS 和 jquery 添加了水印。

JQUERY部分-

var email = "testing"; // email varibale was set in one of php file.
var content = '<style>.parent-video:before{content: "'+email+'";}</style>';
$('head').append(content);

CSS部分-

.parent-video::before {  //this is div, parent of video element
    position: absolute;
    opacity: 0.8;
    background: #fff;
    color: #414040;
    font-size: 10px;
    top: 5px;
    right: 10px;
    max-width: 16%;
    word-wrap: break-word;
    max-height: 75%;
}
.parent-video .child-video { // .child-video is video element
    position: unset !important;
}

Answer 1

CSS

一种简单的方法是使用持续时间为 240 秒的 CSS 动画。位置不是随机的，但这是一种简单的方法：

.parent-video::before {
    position: absolute;
    opacity: 0.8;
    background: #fff;
    color: #414040;
    font-size: 80px;
    max-width: 16%;
    word-wrap: break-word;
    max-height: 75%;
    animation: watermark infinite 240s;
}



@keyframes watermark {
        0% {
            bottom: unset;
            top: 5px;
            right: 10px;
            left: unset;
        }
        25% {
            top: unset;
            bottom: 5px;
            left: 10px;
            right: unset;
        }
        50% {
            bottom: unset;
            top: 5px;
            left: 10px;
            right: unset;
        }
        75% {
            top: unset;
            bottom: 5px;
            right: 10px;
            left: unset;
        }
    }

JQuery

或者，您可以使用 JQuery 并使其随机化。首先，你要创建4个CSS 类（4个位置）因为JQuery不能直接访问伪类的样式

所以，这是 CSS:

.parent-video.watermark-top::before {
    bottom: unset;
    top: 5px;
}

.parent-video.watermark-bottom::before {
    bottom: 5px;
    top: unset;
}

.parent-video.watermark-left::before {
    left: 10px;
    right: unset;
}

.parent-video.watermark-right::before {
    left: unset;
    right: 10px;
}

脚本将运行永远每 60 秒。水印顶部或底部对齐的可能性为 50%，左侧或右侧对齐的可能性为 50%。

function move() {

    var element = $('.parent-video');
    if (Math.random() > 0.5) //align left
        element.addClass("watermark-left").removeClass("watermark-right");
    else //align right
        element.addClass("watermark-right").removeClass("watermark-left");

    if (Math.random() > 0.5) //align top
        element.addClass("watermark-top").removeClass("watermark-bottom");
    else //align right
        element.addClass("watermark-bottom").removeClass("watermark-top");


}



window.setInterval(move, 60000); //invoke!

要停止无限循环，请使用 clearInterval()。

是随机的，它隐含地允许您的水印多次保持相同的位置。

无需插件，每分钟在不同位置重新定位视频水印

Reposition watermark on video at different positions every minute without plugin

javascript

jquery

css

video-watermarking

CSS

JQuery