用vue写一个拥有所有功能的好看的视频播放器

好的，以下是一个功能齐全且美观的视频播放器的示例代码：

<template>
  <div class="video-player">
    <div class="video-wrapper">
      <video ref="videoRef" @loadedmetadata="handleLoadedMetaData" @timeupdate="handleTimeUpdate"
        @ended="handleEnded">
        <source :src="src" type="video/mp4">
      </video>
      <div class="video-controls" :class="{ 'video-controls--visible': controlsVisible }"
        @mousemove="handleMouseMove" @mouseleave="handleMouseLeave">
        <div class="video-progress" @click="handleProgressClick">
          <div class="video-progress-bar">
            <div class="video-progress-filled" :style="{ width: progress + '%' }"></div>
          </div>
        </div>
        <div class="video-timer">{{ currentTime }} / {{ duration }}</div>
        <div class="video-buttons">
          <button class="video-button" @click="togglePlayPause">
            <i :class="playPauseIcon"></i>
          </button>
          <button class="video-button" @click="toggleMute">
            <i :class="muteIcon"></i>
          </button>
          <div class="video-volume">
            <div class="video-volume-bar">
              <div class="video-volume-filled" :style="{ width: volume + '%' }"></div>
            </div>
          </div>
          <button class="video-button" @click="toggleFullscreen">
            <i :class="fullscreenIcon"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: 'your-video-url.mp4',
      controlsVisible: false,
      currentTime: 0,
      duration: 0,
      progress: 0,
      playing: false,
      muted: false,
      volume: 100,
      fullscreen: false
    }
  },
  mounted() {
    const video = this.$refs.videoRef;
    video.addEventListener('loadedmetadata', this.handleLoadedMetaData);
    video.addEventListener('timeupdate', this.handleTimeUpdate);
    video.addEventListener('ended', this.handleEnded);
  },
  methods: {
    handleLoadedMetaData() {
      const video = this.$refs.videoRef;
      this.duration = Math.floor(video.duration);
    },
    handleTimeUpdate() {
      const video = this.$refs.videoRef;
      this.currentTime = Math.floor(video.currentTime);
      this.progress = (this.currentTime / this.duration) * 100;
    },
    handleEnded() {
      this.playing = false;
    },
    handleMouseMove() {
      this.controlsVisible = true;
      setTimeout(() => {
        this.controlsVisible = false;
      }, 3000);
    },
    handleMouseLeave() {
      this.controlsVisible = false;
    },
    handleProgressClick(e) {
      const video = this.$refs.videoRef;
      const rect = e.target.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const width = rect.width;
      const percent = x / width;
      this.progress = percent * 100;
      video.currentTime = (percent * this.duration).toFixed(2);
    },
    togglePlayPause() {
      const video = this.$refs.videoRef;
      if (this.playing) {
        video.pause();
        this.playing = false;
      } else {
        video.play();
        this.playing = true;
      }
    },
    toggleMute() {
      const video = this.$refs.videoRef;
      if (this.muted) {
        video.muted = false;
        this.muted = false;
        this.volume = video.volume * 100;
      } else {
        video.muted = true;
        this.muted = true;
        this.volume = 0;
      }
    },
    toggleFullscreen() {
      const video = this.$refs.videoRef;
      if (!this.fullscreen) {
        if (video.requestFullscreen) {
          video.requestFullscreen();
        } else if (video.webkitRequestFullscreen) {
          video.webkitRequestFullscreen();
        } else if (video.msRequestFullscreen) {
          video.msRequestFullscreen();
        }
        this.fullscreen = true;
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        this.fullscreen = false;
      }
    }
  },
  computed: {
    playPauseIcon() {
      return this.playing ? 'fas fa-pause' : 'fas fa-play';
    },
    muteIcon() {
      return this.muted ? 'fas fa-volume-mute' : 'fas fa-volume-up';
    },
    fullscreenIcon() {
      return this.fullscreen ? 'fas fa-compress' : 'fas fa-expand';
    }
  }
}
</script>

<style>
.video-player {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.video-wrapper {
  position: relative;
}

.video-controls {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  transition: opacity 0.2s;
  opacity: 0;
}

.video-controls--visible {
  opacity: 1;
}

.video-progress {
  width: 60%;
  height: 10px;
  cursor: pointer;
}

.video-progress-bar {
  width: 100%;
  height: 2px;
  background-color: #ddd;
}

.video-progress-filled {
  height: 2px;
  background-color: #007bff;
}

.video-timer {
  font-size: 14px;
}

.video-buttons {
  display: flex;
}

.video-button {
  margin-left: 10px;
  padding: 5px;
  background-color: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.video-volume {
  width: 60px;
  height: 10px;
  margin-left: 10px;
  cursor: pointer;
}

.video-volume-bar {
  width: 100%;
  height: 2px;
  background-color: #ddd;
}

.video-volume-filled {
  height: 2px;
  background-color: #007bff;
}

i {
  font-size: 20px;
}
</style>

这个视频播放器具有播放、暂停、音量控制、全屏等功能，而且界面也很美观。你只需要将 `your-video-url.mp4` 替换为你的视频地址即可。当然，这只是一个示例代码，你可以根据自己的需求进行修改和扩展。