如何在全屏的Media Player顶部显示文本? [英] 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.

样式表显示:块"；

由于未显示而无法删除.

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>

(我正在使用Getusermedia()API)

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

推荐答案

您好，请使用此代码

  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/

这篇关于如何在全屏的Media Player顶部显示文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！