如何在媒体播放器顶部全屏显示文本？答案

【问题标题】：How to display a text on the top of Media Player on full screen?如何在媒体播放器顶部全屏显示文本？
【发布时间】：2016-11-30 03:59:35
【问题描述】：

使用下面的代码，我在调试时得到了结果，但我无法在没有调试的情况下显示文本。

样式表显示：'block';

由于未显示，因此无法删除。

<div class="video-overlay" id="overlayclass"></div>
<video id="preview" muted style="background-color: #2a2a2a;border: 1px solid black; height: 300px; width: 100%;"></video>

（我正在使用 Getusermedia() API）

function toggleFullScreen() {
        //var pre1 = preview.webkitDisplayingFullscreen;
        if (preview.webkitRequestFullScreen)
        {          
            $(".video-overlay").remove("style");
            preview.webkitRequestFullScreen();
            var pre = preview.webkitDisplayingFullscreen
            if (pre == true) {
              
                $('.video-overlay').text('Recording');
                
                $(".video-overlay").css("display", "flex");
            }
        }
        else if (preview.mozRequestFullScreen)
        {
            preview.mozRequestFullScreen();
        }
    }

<div class="video-overlay" id="overlayclass"></div>
        <video id="preview" muted style="background-color: #2a2a2a;border: 1px solid black; height: 300px; width: 100%;"></video>
<style>
.video-overlay {
        /*display:flex!important;*/
        position: absolute;
        left: 0px;
        top: 0px;
        margin: 10px;
        padding: 10px 10px;
        font-size: 40px;
        font-family: Helvetica;
        color: #FFF;
        float: left;
    }

   .video-overlay div {
    display: flex !important;
}
  </style>

【问题讨论】：

标签： javascript c# asp.net-mvc-5

【解决方案1】：

你好使用这个代码

  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);

  #overlay {
  position: absolute; 
  top: 100px; 
  color: #FFF; 
  text-align: center;
  font-size: 20px;
  background-color: rgba(221, 221, 221, 0.3);
  width: 640px;
  padding: 10px 0;
  z-index: 2147483647;
}

#v {
  z-index: 1;
}

  <video id="v" controls>
    <source id='mp4'
    src="http://media.w3.org/2010/05/sintel/trailer.mp4"
    type='video/mp4'>
    <source id='webm'
    src="http://media.w3.org/2010/05/sintel/trailer.webm"
    type='video/webm'>
    <source id='ogv'
    src="http://media.w3.org/2010/05/sintel/trailer.ogv"
    type='video/ogg'>
    <p>Your user agent does not support the HTML5 Video element.</p>


  </video>
  <div id="overlay">This is HTML overlay on top of the video! </div>

点击此链接，这里是根据您的要求进行的演示。祝你好运

http://jsfiddle.net/carmijoon/pzbkx/

【讨论】：