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/