web端video常用控制配置

Posted 2022-10-29 super码王

一、阻止视频video标签点击视频区域播放暂停

<video controls id="video1" autoplay muted playsinline></video>

myVid = document.getElementById("video1");
 
myVid.addEventListener("click", mouseHandler, false);
 
function mouseHandler(event) 
      // 阻止视频默认点击事件
      event.preventDefault()

二、隐藏video的各种控件

<video controls class="video"/>

/* 隐藏video 全屏按钮 */
.video::-webkit-media-controls-fullscreen-button 
		display: none;

/* 隐藏video 播放按钮 */
.video::-webkit-media-controls-play-button 
		display: none;

/* 隐藏video 进度条 */
.video::-webkit-media-controls-timeline 
		display: none;

/* 隐藏video 观看的当前时间 */
.video::-webkit-media-controls-current-time-display
		display: none;            

/* 隐藏video 剩余时间 */
.video::-webkit-media-controls-time-remaining-display 
		display: none;            

/* 隐藏video 音量按钮 */
.video::-webkit-media-controls-mute-button 
		display: none;            

.video::-webkit-media-controls-toggle-closed-captions-button 
		display: none;            

/* 隐藏video 音量的控制条 */
.video::-webkit-media-controls-volume-slider 
		display: none;            

/* 隐藏video 所有控件 */
.video::-webkit-media-controls-enclosure 
		display: none;