0

我想在每分钟后更改视频上水印的位置，例如右上角，左上角一分钟后等。在播放视频时这些随机位置。我已经通过 CSS 和 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;
}
4

1 回答 1

2

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().

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

于 2020-09-01T06:49:33.837 回答