全屏时更改html5视频控件布局 [英] change html5 video controls layout when fullscreen

问题描述

我遵循这篇关于如何更改的教程html5视频控件布局。但是当我进入全屏模式时，控件会恢复默认状态。任何人都可以在全屏模式下更改布局吗？

和全屏模式：

  video ::  -  webkit-media-controls-enclosure {
 display：none！重要; 
} 
  

设置 z-index 自定义控件等于或高于 2147483647 ：

 ＃video-controls {
 z-index：2147483647; 
} 
  

资料来源：以全屏模式隐藏原生HTML5视频控件

注意：如果您遵循教程，那么您需要还要设置自定义控件的位置以使其可见：

 ＃视频控制{
 z-index：2147483647; 
位置：绝对; / *左上角，如果你喜欢就更改* / 
} 
  

I'm following this tutorial on how to change html5 video controls layout. But when i go fullscreen mode, the controls goes back to default. Do anyone have an example on how i can change the layout in fullscreen mode?

解决方案

Hide the native controls completely, in both normal and full-screen mode:

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

Set the z-index for the custom controls to be equal to or higher than 2147483647:

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

Source: Hiding Native HTML5 Video Controls in Full-Screen Mode

Note: if you are following the tutorial, then you need to also set position of custom controls to make it visible:

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

这篇关于全屏时更改html5视频控件布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！