Свойство flex не работает должным образом, когда включен элемент video - PullRequest
Новая
       3

Свойство flex не работает должным образом, когда включен элемент video

0 голосов
/ 25 мая 2018

Мне нужно отобразить видео, и когда пользователь нажимает меню, мне нужно разделить экран на 2 половины по вертикали (рядом друг с другом), и мне нужно отобразить текст посередине (по горизонтали и вертикали) первой половины, и мне нужноотображать список (который будет создан динамически с использованием javascript) во второй половине (все это должно происходить во время воспроизведения видео в фоновом режиме. В основном меню должно быть прозрачным).Я создал родительский div и 2 дочерних div с flex, как показано ниже.

html-код: 

<!DOCTYPE html>
<html>
    <head>
        <title>VOD</title>
        <script src='js/index.js'>
        </script>
        <style>
            html, body
            {
                height:100%
            }

            #vid
            {
                position: fixed;
                top: 50%; left: 50%;
                z-index: 1;
                min-width: 100%;
                min-height: 100%;
                width: auto;
                height: auto;
                transform: translate(-50%, -50%);
            }

            #mid {
                display: flex;
                height: 100vmin;
                justify-content: stretch;
                flex-flow: row nowrap;
                background: blueviolet;
                z-index: 2;
            }

            #mid1, #mid2 {
                flex: 1;
            }

            #mid1 {
                display: flex;
                justify-content: center;
                align-items: center;
                background: red;
                text-align: center;
            }

            #mid2 {
                display: flex;
                justify-content: center;
                align-items: center;
                background: blue;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!--<video id='vid' src='textMotion.mp4' autoplay loop></video>-->
        <div id='mid' style="display:none">
        <!--<div id='mid'>-->
            <div id='mid1'>
                <h2>text1</h2>
            </div>
            <div id='mid2'>
                <h2>text2</h2>
            </div>
        </div>
    </body>
</html>

Javascript Code: 

function changeChannel(e) {
    console.log('received keyEvent : ' + e.keyCode);
    let keyCode = e.keyCode;

    if(keyCode == 77) {
        document.getElementById('mid').style.display = 'block';
    }
}

document.addEventListener('keydown', changeChannel);

У меня проблемы ниже.

1) Если я нажму 'M', меню не появится.Он должен отображать прозрачный экран (со строками в 2 деления) при работе видео в фоновом режиме.

2) В целях тестирования я прокомментировал элемент видео.Затем, если я нажму 'M', 2 div будут отображаться горизонтально вверху.

Только если я не добавлю атрибут "display = none" к середине, он будет работать как положено.Может кто-нибудь, пожалуйста, помогите мне решить эту проблему.

Ответы [ 2 ]

0 голосов
/ 25 мая 2018

Хорошо, это так, если вы используете jquery, вы можете просто переключаться между display: hidden и display: block или вы можете добавить класс .hidden, который просто имеет это правило: display: hidden и переключать onclick, если элемент имеетэто или нет, как сказал @RokoCBuljan.

html,body {
  width: 100%;
  height: 100%;
}
#vid {
  display: block;
  position: fixed;
  bottom: 12%; left: 30%;
  background: slateblue;
  height: 300px;
  width: 360px;
}

#mid {
  display: flex;
  z-index: 1;
  height: 100vmin;
  justify-content: stretch;
  flex-flow: row nowrap;
  background: blueviolet;
}

#mid1, #mid2 {
  flex: 1;
}

#mid1 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  text-align: center;
}

#mid2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: blue;
  text-align: center;
}

С помощью свойства position: fixed; я получаю div вне нормального потока, и z-index просто для уверенности, что он будет помещен поверх других div ...Если вы хотите добавить более приятный внешний вид, добавьте свойство (с помощью функции переключения, который вы должны создать) opacity: 1; и opacity: 0;, чтобы оно постепенно исчезало и исчезало

рабочая ручка: https://codepen.io/manAbl/pen/WJqRKR?editors=0100;

Надежда помогает:)

0 голосов
/ 25 мая 2018

Вы устанавливаете #mid обратно на display:block вместо желаемого display: flex ... Вместо этого:

  • создайте класс CSS .hidden {display: none;} и назначьте его на #mid element
  • в JS использует Element.classList, и это .toggle() метод для переключения 'hidden' class
  • Установите #vid в z-inedx: -1, так как он должен быть в фон , в то время как ваш # mid не имеет position набора. 

var EL_mid = document.getElementById('mid')

function changeChannel(e) {
  if (e.key === 'm') {
    EL_mid.classList.toggle("hidden");
  }
}

document.addEventListener('keydown', changeChannel);
*{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}

#vid {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

#mid {
  display: flex;
  height: 100vmin;
  justify-content: stretch;
  flex-flow: row nowrap;
  background: blueviolet;
  z-index: 2;
}
#mid.hidden {
  display: none; 
}

#mid1,
#mid2 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  text-align: center;
}
#mid1 {background: red;}
#mid2 {background: blue;}
<video id='vid' src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' autoplay loop></video>

<div id='mid' class="hidden">
  <div id='mid1'>
    <h2>text1</h2>
  </div>
  <div id='mid2'>
    <h2>text2</h2>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...