H5中video全屏后如何隐藏默认控件并显示自定义控件

H5中video全屏后如何隐藏默认控件并显示自定义控件

全屏后如何隐藏默认控件

/*全屏操作后  自带的控制栏会显示  在显示的时候隐藏*/
video::-webkit-media-controls {
    
    
    display: none !important;
}
.controls {
    
    
    比全屏的状态下的视频元素高*/
    z-index: 2147483647;
    opacity: 1;
}

显示自定义控件

将video外层的div全屏的，这样就可以出现控件了

/*全屏操作*/
// video.webkitRequestFullScreen();
$player.get(0).webkitRequestFullScreen();