html5 video标签用法

width = "宽度" 
height = "高度"
controslist = "nodownload //隐藏下载按钮
nofullscrean //隐藏全屏按钮
autoplay //自动播放
muted //默认视频初始为静音状态
loop //循环播放
preload //预加载

css

// 隐藏video 音量按钮
video::-webkit-media-controls-mute-button {
  display: none !important;
}
 
// 隐藏video 当前按钮
video::-webkit-media-controls-current-time-display {
  display: none !important;
}
 
// 隐藏video 总时间
video::-webkit-media-controls-time-remaining-display {
  display: none !important;
}
 
// 隐藏video 全屏按钮
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

vue禁止拖动进度条

<video
      @timeupdate="timeupdate"
      src="../../assets/WeChat_20211115174236.mp4"
></video>
<script>
	export default{
		data() {
    		return {
				currTime: null,
      			maxTime: 0,
			}
    	},
    	methods: {
    		timeupdate(e) {
     			//   console.log(e.srcElement.currentTime - this.currTime);
      			if (e.srcElement.currentTime - this.currTime > 1) {
        			e.srcElement.currentTime = this.currTime > this.maxTime ? this.currTime : this.maxTime;
        			// console.log("快进了");
      			}
      			this.currTime = e.srcElement.currentTime;
      			this.maxTime = this.currTime > this.maxTime ? this.currTime : this.maxTime;
      			//   console.log("视频记录", e.srcElement.currentTime);
      			//   console.log("本地记录", this.currTime);
    		},
    	}
	}
</script>