视频video鼠标移入移除展示隐藏(自定义控件)

效果图

在这里插入图片描述

代码

<template><div class="video-container" @mouseover="showControls" @mouseleave="hideControlsAfterDelay"><videoref="video"@loadedmetadata="initializePlayer"@timeupdate="updateProgress"@ended="resetPlayer"width="640"height="360"src="./11.mp4"></video><!--video自带的属性设置controls="false" 禁用自带默认控件(直接不写才会展示自定义的控件)--><div v-if="isControlsVisible" class="controls"><button @click="playPause">{{ isPlaying ? 'Pause' : 'Play' }}</button><input type="range" min="0" :max="duration" v-model.number="currentTime" @input="seekTo" /><span>{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</span><button @click="muteUnmute">{{ isMuted ? 'Unmute' : 'Mute' }}</button></div></div>
</template><script>
export default {data() {return {isControlsVisible: false,isPlaying: false,isMuted: false,currentTime: 0,duration: 0,controlsTimeout: null,};},methods: {playPause() {const video = this.$refs.video;if (this.isPlaying) {video.pause();} else {video.play();}this.isPlaying = !this.isPlaying;},seekTo(event) {const video = this.$refs.video;video.currentTime = event.target.value;},updateProgress() {this.currentTime = this.$refs.video.currentTime;},initializePlayer() {this.duration = this.$refs.video.duration;},resetPlayer() {this.currentTime = 0;this.isPlaying = false;},muteUnmute() {const video = this.$refs.video;video.muted = !video.muted;this.isMuted = video.muted; // 更新静音状态},// 可以添加一个计算属性来显示当前的播放/暂停和静音/取消静音文本computed: {isMuted() {return this.$refs.video.muted;},},showControls() {this.isControlsVisible = true;if (this.controlsTimeout) {clearTimeout(this.controlsTimeout);this.controlsTimeout = null;}},hideControlsAfterDelay() {this.controlsTimeout = setTimeout(() => {this.isControlsVisible = false;}, 3000); // 3秒后隐藏控件，时间可根据需要调整},formatTime(time) {const minutes = Math.floor(time / 60);const seconds = Math.floor(time % 60).toString().padStart(2, '0');return `${minutes}:${seconds}`;},},
};
</script><style scoped>
.video-container {position: relative;width: 640px;height: 360px;border: 1px solid #ccc;
}.controls {position: absolute;bottom: 10px;left: 10px;right: 10px;display: flex;justify-content: space-between;align-items: center;background: rgba(255, 255, 255, 0.7);padding: 5px;border-radius: 5px;
}.controls button,
.controls input[type="range"] {flex: 1;
}.controls input[type="range"] {margin: 0 10px;
}
</style>