每分钟在没有插件的情况下在不同位置的视频上重新放置水印

问题描述

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

JQUERY PART-

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 PART-

.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;
}

解决方法

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无法直接访问 pseudoclass 的样式。

所以，这是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()。

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