Question

当前正在使用html5视频播放器。我遇到一个问题，即视频元素全屏显示后，由于视频的z-index设置为最大int值，我的自定义控件无法点击；与控件的z-index相同。默认的浏览器媒体控件已被隐藏。

<div id="video-container">
  <video frameborder='0' id="page-video" playsinline>
        <source src='{{source}}'>
  </video>
  <div class="container" id="player-controls">
     <!-- controls go here -->
  </div>
</div>

这是全屏视频容器的css：

#video-container {
position: relative;
max-width: 512px;
margin: 0 auto;
}

这是全屏视频的CSS：

#page-video:-webkit-full-screen {
width: 100%;
height: 100%;
position: relative;
z-index: 1 !important;
}

以下是控件的CSS：

#player-controls {
position: absolute;
bottom: 0;
left: 0;
max-width: 100%;
height: auto;
margin: 0 auto;
background: rgba(255, 255, 255, 0.8);
visibility: hidden;
transition: all .2s linear;
padding: 0;
width: 100%;
z-index: 2147483647; 
cursor: pointer;
}

在Chrome开发者工具中，视频元素的计算Z索引在未全屏显示时从自动更改为2147483647，但是单击箭头以展开，它显示Z索引：1！样式表。此样式未删除或任何形式。我真的不明白为什么会这样。这是我整个样式表中仅有的两个使用z-index的地方。任何地方都没有负Z索引。

Answer 1

视频标签将忽略您在其上设置的z-index，并使用UA样式“ auto”和2147483647，除非您在其上设置了position: absolute或position: fixed。参见HTML5 video ignoring z-index

Answer 2

要隐藏本机控件，您需要通过“ controls”属性将其禁用。

<video controls="false">...</video>

在某些浏览器中，似乎存在一个错误，因此本机控件在全屏模式下仍然可见。您可以覆盖浏览器的样式表并手动隐藏它们：

video::-webkit-media-controls {
    display:none !important;
}

要显示您的自定义控件，只需将z-index设置为最大int值。

#player-controls {
    z-index: 2147483647;
}

所有这些都在此博客中进行了描述：https://css-tricks.com/custom-controls-in-html5-video-full-screen/

计算的Z索引与元素样式不匹配

2 个答案: