Мне нужно сначала отобразить видео в полноэкранном режиме, и если пользователь нажимает клавишу «m», мне нужно отобразить div с текстом и сразу же вниз по тексту, мне нужно отобразить видео.когда я нажимаю 'm', хотя я устанавливаю ширину и высоту, видео не отображается на всей ширине и высоте, которые я установил, и если текст не отображается на стороне div.Ниже приведен код.
html:
<!DOCTYPE html>
<html>
<head>
<title>VOD</title>
<script src='lib/hls.js'></script>
<script src='js/index.js'></script>
<style>
html, body
{
height:100%;
width: 100%;
overflow: hidden;
background-color: dimgray;
}
#header {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 50px;
background-color: black;
color: white;
}
#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: 50px;
top: 50px;
width: 320px;
height: 256px;
margin: 0;
padding: 0;
border: 0;
}
</style>
</head>
<body>
<div id='header' style="display:none">
<h2>DVR</h2>
</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 hid = document.getElementById('header');
if(vid.classList.contains('pip') == true) {
hid.style.display = 'none';
vid.classList.add('full');
vid.classList.remove('pip');
return;
}
hid.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);
Снимок экрана:
Когда пользователь выбирает «m», видео-пункт должен отображаться сразу под элементом «заголовка».Но, как показано на скриншоте, между видео и заголовком виден большой разрыв.Когда я проверяю элемент, элемент video находится прямо под заголовком.Но это не видно.Я думаю, что это из-за соотношения сторон.Может кто-нибудь, пожалуйста, дайте мне знать, как решить эту проблему.Как мы можем быть уверены, что видео должно полностью отображаться с заданной шириной и высотой.