如何在Media Player顶部全屏显示文本

How to display a text on the top of Media Player on full screen?

本文关键字：显示 文本 顶部 Player Media      更新时间：2023-09-26

使用下面的代码，我在调试时得到了结果，但如果没有调试，我就无法显示文本。

样式表显示："块"；

由于此项未显示，无法删除。

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

Hello使用此代码

  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/
相关文章：