1
使用下面的代码,我得到了调试结果,但我无法显示没有调试的文本。如何在全屏幕上显示Media Player顶部的文本?
样式表显示:'block';
由于未显示,无法将其删除。
<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>
另一个完美的例子是http://www.html5rocks.com/en/tutorials/track/basics/ – 2016-07-27 06:37:51