Мне нужно отображать видео в полноэкранном режиме, когда пользователь запускает приложение и когда пользователь нажимает «m», размер видео Div должен быть уменьшен, и необходимо отображать div под видео и текст внутри div.Текст должен быть выровнен по горизонтали и вертикали внутри div.Я использовал display: table-cell, но он не работает.Ниже приведен код.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>VOD</title>
<script src='js/index.js'></script>
<style>
html, body
{
height:100%;
width: 100%;
overflow: hidden;
background-color: #2F4F4F;
}
#header {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 75px;
background-color: black;
color: white;
padding-left: 75px;
font-family: sans-serif;
}
#hdiv {
position: fixed;
left: 75px;
top: 300px;
height: 100%;
width: 376px;
display: table;
box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.7), inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
#htxtdiv {
width: 100%;
height: 50px;
color: white;
font-family: sans-serif;
display: table-cell;
vertical-align: middle;
text-align: center;
}
#vid.full {
position: fixed;
top: 50%;
left: 50%;
z-index: 3;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
}
#vid.pip {
position: fixed;
left: 75px;
top: 75px;
width: 376px;
height: 205px;
background-color:black;
border-left: 1px solid #b5b5b5;
border-right: 1px solid #b5b5b5;
border-bottom: 1px solid #b5b5b5;
z-index: 3;
}
</style>
</head>
<body>
<div id='maindiv' style='display:none'>
<div id='header'>
<h2>DVR</h2>
</div>
<div id='hdiv'>
<div id='htxtdiv'>
<h3>Cloud DVR Recordings</h3>
</div>
</div>
</div>
<video id='vid' src='textMotion.mp4'class='full' autoplay></video>
</body>
</html>
Javascript:
function displayMenu() {
// If already menu is visible, hide it
let vid = document.getElementById('vid');
let mdiv = document.getElementById('maindiv');
if(vid.classList.contains('pip') == true) {
mdiv.style.display = 'none';
vid.classList.add('full');
vid.classList.remove('pip');
return;
}
mdiv.style.display = 'block';
vid.classList.add('pip');
vid.classList.remove('full');
}
function processKeyPress(e) {
console.log('received keyEvent : ' + e.keyCode);
let keyCode = e.keyCode;
// Menu button or key 'm'
if((keyCode == 77) || (keyCode == 462)) {
displayMenu();
}
}
document.addEventListener('keydown', processKeyPress);
Я использую 'дисплей: table 'для внешнего div (hdiv) и' display: table-cell 'для внутреннего div (htxtdiv).Несмотря на то, что текст «Cloud DVR Recordings» расположен по центру по горизонтали, он не центрируется по вертикали.
Ниже приведен скриншот.
Кто-нибудь может помочь мне решить эту проблему?