包含视频元素时，flex属性未按预期工作 [英] flex property is not working as expected when video element is included
问题描述
我需要显示视频，当用户按下菜单时，我需要将屏幕垂直划分为两半（彼此相邻），我需要在上半部分的中间（水平和垂直）显示文本，并且需要在下半部分显示一个列表（将使用javascript动态创建）（所有这些都应该在后台播放视频时发生。基本上菜单应该是透明的）。我创建了一个父div和2个带有flex的子div，如下所示。
I need to display video and when user presses menu, I need to divide the screen to 2 halves vertically (adjacent to each other) and I need to display a text in middle (horizontally and vertically) of first half and need to display a list (which will be created dynamically using javascript) in the second half (all this should happen while video is being played in the background. Basically menu should be transparent). I created a parent div and 2 child divs with flex as below.
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代码：
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个div的字符串）。
1) If I press 'M', menu is not getting displayed. It should display transparent screen (with strings in 2 divs) while video running in background.
2）出于测试目的，我评论了视频元素。然后如果我按'M'，则会在顶部水平显示2个div。
2) For testing purposes, I commented video element. Then if I press 'M', 2 divs are getting displayed horizontally at the top.
仅当我没有将属性display = none添加到mid时，它按预期工作。任何人都可以帮我解决这个问题。
Only if I don't add the attribute "display=none" to mid, it is working as expected. Can any one please help me to fix this issue.
推荐答案
你要设置 #mid 返回显示：阻止而不是所需的显示：flex ...而是：
You're setting #mid back to display:block instead to the desired display: flex... Instead:
- 创建一个CSS类
.hidden {display：none;}并将其分配给您#mid元素 - 在JS中使用
Element.classList并且它是.toggle（）切换'隐藏'类的方法 - 设置
#vid到z-inedx：-1因为它应该在背景中而你的 #mid 没有位置设置。
- create a CSS class
.hidden {display: none;}and assign it to your#midelement - in JS use
Element.classListand it's.toggle()method to toggle that'hidden'class - Set
#vidtoz-inedx: -1since it should be in the background while your #mid has nopositionset.
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>
这篇关于包含视频元素时，flex属性未按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
