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

Hello使用此代码

＆＃13;

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

＆＃13;

  #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;
}

＆＃13;

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

＆＃13;

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

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

如何在全屏幕上显示Media Player顶部的文字？

1 个答案: