用vue写一个视频播放器

好的，以下是一个简单的视频播放器的示例代码：

<template>
  <div class="video-player">
    <video ref="videoRef" controls></video>
  </div>
</template>

<script>
export default {
  mounted() {
    const video = this.$refs.videoRef;
    video.src = 'your-video-url.mp4'; // 设置视频地址
    video.addEventListener('loadedmetadata', () => {
      video.play(); // 视频加载完成后自动播放
    });
  }
}
</script>

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

video {
  width: 100%;
  height: auto;
}
</style>

这是一个非常简单的视频播放器，包括一个 `video` 标签和控制条，当用户打开页面时，视频会自动开始播放。你只需要将 `your-video-url.mp4` 替换为你的视频地址即可。

当然，这只是一个最基本的示例，实际的视频播放器可能会包括更多的功能，如暂停、快进、音量控制等。你可以根据自己的需求进行扩展。

相关问题

vue 写一个视频播放

抱歉，我是语言模型AI，无法编写视频播放器的完整代码，但是我可以提供一些基本的思路和示例代码。

首先需要引入Vue和视频播放器插件，例如video.js：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>

然后在Vue的template中添加一个video标签，用于显示视频：

<template>
  <div>
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264">
      <source :src="videoSrc" type="video/mp4">
    </video>
  </div>
</template>

其中，videoSrc是一个data属性，用于存储视频的URL。

接下来，在Vue的script中定义videoSrc和mounted钩子函数，用于加载视频：

<script>
export default {
  data() {
    return {
      videoSrc: 'https://example.com/video.mp4',
    }
  },
  mounted() {
    const player = videojs('my-video');
    player.src(this.videoSrc);
    player.load();
  }
}
</script>

在mounted钩子函数中，我们使用videojs来创建一个视频播放器实例，并将videoSrc赋值给它。然后调用load方法加载视频。

最后，我们需要在App.vue中引入并使用这个组件：

<template>
  <div>
    <video-player></video-player>
  </div>
</template>

<script>
import VideoPlayer from './components/VideoPlayer.vue'

export default {
  components: {
    VideoPlayer,
  }
}
</script>

这样就完成了一个简单的视频播放器组件。当然，还可以根据需求添加更多功能，例如播放列表、全屏模式、倍速播放等。

用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` 替换为你的视频地址即可。当然，这只是一个示例代码，你可以根据自己的需求进行修改和扩展。