Media Playerの上部にテキストをフルスクリーンで表示するにはどうすればいいですか？

Question

次のコードを使用すると、デバッグ時に結果が表示されますが、デバッグなしでテキストを表示できません。

スタイルシート表示： 'ブロック';

これは表示されないため削除できません。

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