html5 video标签用法

wuchangjian2021-11-16 11:16:03编程学习
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>

相关文章

分布式机器学习平台搭建笔记

在最近的一段时间,主要投入到“分布式机器学习平台” 的技术选型和搭建过程&...

有仪网,仪器行业提前做好备货计划

年底各个厂家的涨价通知函应该又要如约而至了,今年与往年不同的是࿰...

线性代数1(2021.10.27)

1.置换矩阵[一个m*n(m<=n)的(0,1)矩阵P为置换矩阵的充要条件...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。