话不多说,直接上代码吧
...
<video controls ></video>
//隐藏进度条
video::-webkit-media-controls-timeline { display: none;}
//隐藏全屏按钮
video::-webkit-media-controls-fullscreen-button{ display: none; }
//隐藏播放按钮
video::-webkit-media-controls-play-button { display: none; }
//观看的当前时间
video::-webkit-media-controls-current-time-display{ display: none; }
//剩余时间
video::-webkit-media-controls-time-remaining-display { display: none; }
//音量按钮
video::-webkit-media-controls-mute-button { display: none; }
video::-webkit-media-controls-toggle-closed-captions-button { display: none; }
...
如果修改隐藏之后,遇到报错: The play() request was interrupted by a call to pause()
则可用过在video.play(); 加上setTimeout延迟
...
setTimeout(() =>{
video.play();
});
...
即可把问题接解决。
参考: https://www.cnblogs.com/sameen/p/14053971.html