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>

相关文章

《风尚坐火箭学习vue》-- 第十三章:Vue中的组件(难点)

《风尚坐火箭学习vue》-- 第十三章:Vue中的组件(难点)

前言:前端框架千千万,独有vue占一半 我是风尚...

xhr请求的状态码及其含义

xmlhttp.readyState的值及解释: 0:请求未...

校长开讲|长郡·浏阳肖节长:以青春、奋斗之我书写人生篇章

校长开讲|长郡·浏阳肖节长:以青春、奋斗之我书写人生篇章

2022-08-29 18:35:11 8月29日,长沙市各中小学校迎...

海南省澄迈县8月8日12时至9日24时实行临时性全域静态管理

2022-08-08 07:22:46 8月8日,海南省澄迈县新型冠状...

“秘密”任命自己兼任部长,澳大利亚前总理莫里森将受调查

“秘密”任命自己兼任部长,澳大利亚前总理莫里森将受调查

2022-08-16 15:47:49 澳大利亚媒体15日曝光前总理斯...

发表评论    

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