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

问题

Using the below code, I am getting the result when I debug but I am unable to display the Text without debug.

Style sheet display:'block';

Which is unable to be removed due to this not displaying.

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

(I am using 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>

---

回答1:

Hello Use this code

  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>

Follow this link here is a demo as per your requirement. Good Luck

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

来源：https://stackoverflow.com/questions/38590974/how-to-display-a-text-on-the-top-of-media-player-on-full-screen