video 隐藏部分控件,

// controlslist=“nodownload nofullscreen noremoteplayback”;
 
      <video
        controls
        controlslist="nodownload"  //禁用下载
        class="video-player"
        disablePictureInPicture  // 禁用画中画
        oncontextmenu = "return false"  //禁用鼠标右键
      ></video>
 // // 播放按钮
    video::-webkit-media-controls-play-button {
    
    
      display: none !important;
    }
    // 当前播放时间
    video::-webkit-media-controls-current-time-display {
    
    
      display: none !important;
    }
    // 剩余时间
    video::-webkit-media-controls-time-remaining-display {
    
    
      display: none !important;
    }
    // 音量按钮
    video::-webkit-media-controls-volume-control-container {
    
    
      display: none !important;
    }
    // 全屏
    video::-webkit-media-controls-fullscreen-button {
    
    
      display: none !important;
    }
    // 时间轴
    video::-webkit-media-controls-timeline {
    
    
      display: none !important;
    }
    // 更多选项 --然而并不生效
    video::-internal-media-controls-overflow-button {
    
    
      display: none !important;
    }

controlslist:取值如下,设定多个空格间隔
nodownload:取消更多控件弹窗的下载功能;
nofullscreen:取消全屏功能;
noremoteplayback:取消远程播放视频
controlslist=“nodownload” + disablePictureInPicture,弹窗中两个选项全部取消后,更多按钮自动消失了

参照其他网站:https://blog.csdn.net/qq_38417082/article/details/103749942

猜你喜欢

转载自blog.csdn.net/xingchen678/article/details/125175308