javascript - 全屏时更改 html5 视频控件布局

Question

我正在关注 this关于如何更改 html5 视频控件布局的教程。但是当我进入全屏模式时，控件会恢复为默认值。有没有人举例说明如何在全屏模式下更改布局？

Answer 1

在正常和全屏模式下完全隐藏 native 控件:

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

将自定义控件的z-index设置为等于或高于2147483647:

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

来源:Hiding Native HTML5 Video Controls in Full-Screen Mode

注意:如果您正在关注 tutorial , 那么你还需要设置自定义控件的 position 使其可见:

#video-controls {
  z-index: 2147483647;
  position: absolute; /* top left corner, change it if you like */
}