在HTML5视频上添加带有CSS的移动水印？

如何解决在HTML5视频上添加带有CSS的移动水印？

所以我目前有一些看起来像这样的东西：

<video width="1280" height="720" controls>
  <source src="video_1.mp4" type="video/mp4">
  <source src="video_1.ogg" type="video/ogg">
</video>

我想获得水印文本，将鼠标悬停在视频上，如下所示：

<p class="watermark-vid">Student 141</P>

请注意，虽然在网络上用户可以轻松隐藏水印，但我正在创建一个ElectronJs应用程序，因此他们将无法使用开发人员工具。

解决方法

<div class="video-container">
<video width="1280" height="720" controls>
  <source src="video_1.mp4" type="video/mp4">
  <source src="video_1.ogg" type="video/ogg">
</video>

<p class="watermark-vid">Student 141</P>
</div>

.video-container {
position: relative;
}

.video-container .watermark-vid {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: rgba(255,255,0.5);
}

,

我修改了@Maxim Jin给出的答案，以添加移动水印的“移动”方面。我还找到了一种解决全屏问题的方法，基本上是使用浏览器的全屏API使组件本身变为全屏。

编辑：答案的Codepen：https://codepen.io/mahmoudthepeltist/pen/abNjvqR

<div id="vid-cont" class="video-container">
    <video class="video" controls>
        <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4' id='mp4'>
    </video>

    <p class="watermark">Student 141</P>
    <button class="fullscreen-button" onclick="activateFullscreen()">toggle fullscreen</button>
</div>

我还使用阴影DOM隐藏了全屏按钮，并用我自己的切换全屏按钮替换了它。

.video-container {
    position: relative;
}

.video {
    width: 100%;
    height: 100%;
}

video::-webkit-media-controls-fullscreen-button
{
    display: none !important;
}

.fullscreen-button {
    position: absolute;
    top: 2%; left: 90%;
    z-index: 10;
}

.watermark {
    position: absolute;
    left: 3%; top: 3%;
    color: white;
    animation: 15s moving-watermark infinite;
}

@keyframes moving-watermark {
    0%   {left: 3%; top: 3%;}
    25% {left: 93%; top: 3%;}
    50% {left: 93%; top: 93%;}
    75% {left: 3%; top: 93%;}
    100% {left: 3%; top: 3%;}
}

切换是通过javascript完成的：

function activateFullscreen() {
    if (!document.fullscreenElement) {
        document.getElementById('vid-cont').requestFullscreen();
    } else if (document.exitFullscreen) {
        document.exitFullscreen(); 
    }
}