我添加到视频中的文字在全屏模式下消失

Question

我出于自己的目的编辑了下面答案给出的代码。

How to display a text on the top of Media Player on full screen?

我使用 jsfiddle 来编辑和测试代码。这是我编辑的代码： https://jsfiddle.net/uqgv8tny/

 var overlay= document.getElementById('overlay');
  var video= document.getElementById('v');
  video.addEventListener('progress', function() {
    var show= video.currentTime>=5 && video.currentTime<10;
    overlay.style.visibility= show? 'visible' : 'visible';
  }, false);

   #overlay1 {
  position: absolute; 
  top: 000px; 
  left: -110px;
  color: #00F; 
  text-align: left;
  font-size: 20px;
  width: 640px;
  padding: 10px 0;
  z-index: 2147483647;
}

 #overlay2 {
  position: absolute; 
  top: 000px; 
  left: 650px;
  color: #00F; 
  text-align: left;
  font-size: 20px;
  width: 640px;
  padding: 10px 0;
  z-index: 2147483647;
}


#v {
  z-index: 1;
}

<video id="v" controls>
    <source id='mp4'
    src="https://videos.footballia.net/uploads/video/source_file/17882/1970CheLeeRP1st.mp4"
    type='video/mp4'>
    <source id='webm'
    src="https://videos.footballia.net/uploads/video/source_file/17882/1970CheLeeRP1st.webm"
    type='video/webm'>
    <source id='ogv'
    src="https://videos.footballia.net/uploads/video/source_file/17882/1970CheLeeRP1st.ogv"
    type='video/ogg'>
    <p>Your user agent does not support the HTML5 Video element.</p>


  </video>
  <div id="overlay1">1 Bonetti<br>2 Harris<br>3 McCreadie<br>4 Hollins<br>5 Dempsey<br>6 Webb<br>7 Baldwin<br>8 Cooke<br>9 Osgood<br>10 Hutchinson<br>11 Houseman<br><br>12 Hinton </div>
  
    <div id="overlay2">1 Harvey<br>2 Madeley<br>3 Cooper<br>4 Bremner<br>5 Charlton<br>6 Hunter<br>7 Lorimer<br>8 Clarke<br>9 Jones<br>10 Giles<br>11 Gray </div>

文本按预期添加，但是当我将视频置于全屏模式时，文本消失了。此问题存在于原始代码中，并不是由对我的代码的编辑引起的。我是否必须保存代码而不是通过 jsfiddle 运行它，如果是，我如何将这三个文件相互连接（我在大学学习期间使用过 C 和 Fortran，但我以前从未使用过这种编程语言）。还是代码本身的问题？

Answer 1

这里的问题是，当视频全屏播放时，页面中的所有其他 HTML 元素都处于从属地位。我建议您查看 JavaScript FullScreen API @ MDN，它允许您指定任何 HTML 元素来切换全屏。

出于您的目的，您需要将<video> 和覆盖<div>s 包装在包含元素中，并将其CSS position 属性设置为relative，然后将其设为全屏元素...

/* CSS */
#container {
    position: relative;
}

<!-- HTML -->
<div id="container">
    <video id="v"> ... </video>
    <div id="overlay1"> ... </div>
    <div id="overlay"> ... </div>
</div>

#container 和 absolute 位置的子元素然后可以相对于该元素的左上角进行 CSS 定位。

当您的视频不是全屏时，您可能需要定义#container 的尺寸/比例并将<video> 标签的宽度和高度设置为100%。视频标签是内联元素，因此您还需要考虑到这一点...

#container {
    position: relative;
    width: 640px;
    height: 360px;
}
video#v {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

您的叠加元素应该与之前使用absolute CSS 定位的方式几乎相同。

就 JavaScript 而言，在容器外部提供“可点击”的东西并带有 Element.addEventListener 以全屏显示可能是个好主意。如果您愿意，还可以绑定特定的按键来执行此操作。

我个人更喜欢 <button> 和视频控件，尤其是出现在大多数浏览器视频元素上的“全屏”图标只会全屏显示视频元素本身 - 这会给您带来同样的问题。为避免这种情况，我禁用了视频播放器控件，因此需要提供替代方法。

我不会在这里做所有的播放控制，但你可以从这个例子和video Element interface...

<!-- HTML -->
<button id="go_fullscreen">Go FullScreen</button>

/* JavaScript */
document.getElementById("go_fullscreen").addEventListener(
    "click", toggleFullScreen, !1
);

当然，您需要一个 toggleFullScreen() 函数来附加该事件。也许是这样的，我取自this page @ MDN...

function toggleFullscreen() {
    let elem = document.querySelector("#container");
    elem.onfullscreenchange = handleFullscreenChange;
    if (!document.fullscreenElement) {
        elem.requestFullscreen().then({}).catch(err => {
            alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
        });
    } else {
        document.exitFullscreen();
    }
}

function handleFullscreenChange(event) {
    let elem = event.target;
    let isFullscreen = document.fullscreenElement === elem;

    adjustMyControls(isFullscreen);
}

function adjustMyControls(bool) {
    /* if #container is fullscreen ... */
    if (bool) {
       /* ... additional overlay styling or 
          class swapping when in fullscreen */
    } else {
       /* ... revert to previous style/class etc */
    }
}

adjustMyControls() 函数让您有机会在需要时重新设置文本叠加层的样式 - 例如，更改文本的大小或位置。我会在 #container 上使用 CSS class 来做到这一点...

/* CSS */
#container.fullscreen video#v {
    width: 100vw;
    height: 100vh;
}
#container.fullscreen #overlay1 {
    /* ... etc ... */
}
#container.fullscreen #overlay2 {
    /* ... etc ... */
}

/* JavaScript */
...

function adjustMyControls(bool) {
    if (bool) {
        document.querySelector("video#v").classList.add("fullscreen")
    } else {
        document.querySelector("video#v").classList.remove("fullscreen")
    }
}

我认为所有支持此功能的浏览器也会明确告知用户如何退出全屏模式，默认为Esc 键，因此“切换”可能是此处功能的错误选择。总之……

这绝不是一个完整的答案。您需要阅读一些内容，但我希望这可以为您提供足够的信息，让您朝着正确的方向前进。 :)