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

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 在容器外部提供一些“可点击”的内容可能是个好主意。进入全屏。如果您愿意，也可以绑定(bind)特定的按键来执行此操作。

我个人更喜欢<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()如果您需要这样做，例如，更改文本的大小或位置，函数使您有机会重新设置文本叠加的样式。我会用 CSS class 来做到这一点关于#container ...

/* 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键，因此“切换”对于此处的功能来说可能是错误的选择。无论如何...

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