Question

我最初需要全屏显示视频，如果用户按下“＆＃39; m＆＃39;键，需要显示带有文本的div并立即向下显示文本，我需要显示视频。当我按下＆＃39; m＆＃39;，即使我正在设置宽度和高度，视频也没有以我设置的全宽和高度显示，事件文本没有显示在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);

截图：

当用户选择＆＃39; m＆＃39;时，视频点应立即显示在＆＃39;标题＆＃39;元件。但是根据屏幕截图，视频和标题之间存在很多差距。当我检查元素时，视频元素位于标题下方。但它不可见。我认为这是因为宽高比。任何人都可以告诉我如何解决这个问题。我们如何确保视频应以给定的宽度和高度完全显示。

视频未按CSS中设置的位置显示

0 个答案: