如何在全屏幕上顯示Media Player頂部的文本？

Question

使用下面的代碼，我得到了調試結果，但我無法顯示沒有調試的文本。

樣式表顯示：'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>

---

Answer 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/