基于CSS的HTML视频水印技术

Question

我正在尝试添加水印的视频元素使用CSS。但此代码不起作用

  .v-wrap img{
            width: 100px;
            position: absolute;
            bottom: 0;
            right: 0;
            z-index: 200;
        }

    <div class="v-wrap">
      <img src="images/watemark.png" alt="logo">
         <video id="my_video_1" class="video-js vjs-default-skin" width="320px" height="240px" controls 
             preload="none" poster='../images/digital-marketing.svg' data-setup='{"aspectRatio":"320:240", "playbackRates": [1, 1.5, 2] }'>
           <source src="../images/file_example_MP4_640_3MG.mp4" type='video/mp4' />
         </video>
     </div> 

Answer 1

你的水印被放在右下角，而不是左上角。现在视频结束了。我添加了一个白色背景，这样你就可以看到它了，但如果你愿意，你可以删除它。

video {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
}

.v-wrap img {
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
    background: white;
}

编辑:如果你想在视频的右下角添加水印，你可以添加相对于容器的位置(.v-wrap)，然后将其更改为inline-block，这样容器的边缘就是视频的边缘。像这样

.v-wrap {
    position: relative;
    display: inline-block;
}

.v-wrap img {
    width: 100px;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 200;
    display: inline;
}