自定义样式 + 拖动进度条+切换播放与暂停-玩转 Vue3 播放器

前端

2023-09-05 00:09:30

我们使用 Vue3 来构建一个视频播放器，它具有以下功能：

播放/暂停视频
显示当前播放时间和视频总时长
拖动进度条以跳转到视频中的特定位置
单击视频中的任意位置以跳转到该位置
能够自定义播放器样式

前提条件

在继续之前，您需要确保满足以下先决条件：

您已经安装了 Node.js 和 npm。
您对 Vue3 有基本了解。
您对 HTML 和 CSS 有基本了解。

项目设置

首先，创建一个新的 Vue3 项目：

npx vue-cli create vue3-video-player

然后，进入项目目录：

cd vue3-video-player

安装依赖项

接下来，我们需要安装一些依赖项：

npm install vue-router vuex

创建组件

现在，让我们创建一个名为 VideoPlayer 的组件。这将是我们的播放器组件。在 src/components 目录中创建一个新的文件 VideoPlayer.vue，并添加以下代码：

<template>
  <div class="video-player">
    <video ref="video" :src="src" @click="seek"></video>
    <div class="controls">
      <button @click="playPause">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-play" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path d="M17 4l4 8-4 8V4z"></path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-pause" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <rect x="6" y="4" width="4" height="16"></rect>
          <rect x="14" y="4" width="4" height="16"></rect>
        </svg>
      </button>
      <input type="range" min="0" max="100" value="0" @input="seek" ref="progress">
      <span class="time">{{ currentTime }} / {{ duration }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ['src'],
  data() {
    return {
      currentTime: '00:00',
      duration: '00:00',
      isPlaying: false,
    }
  },
  methods: {
    playPause() {
      this.isPlaying ? this.$refs.video.pause() : this.$refs.video.play()
      this.isPlaying = !this.isPlaying
    },
    seek(e) {
      this.$refs.video.currentTime = e.target.value * this.$refs.video.duration / 100
    },
    updateProgress() {
      this.currentTime = this.formatTime(this.$refs.video.currentTime)
      this.$refs.progress.value = this.$refs.video.currentTime / this.$refs.video.duration * 100
    },
    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60)
      const secondsLeft = Math.floor(seconds % 60)
      return `${minutes < 10 ? '0' + minutes : minutes}:${secondsLeft < 10 ? '0' + secondsLeft : secondsLeft}`
    }
  },
  mounted() {
    this.$refs.video.addEventListener('timeupdate', this.updateProgress)
    this.$refs.video.addEventListener('loadedmetadata', () => {
      this.duration = this.formatTime(this.$refs.video.duration)
    })
  },
  beforeDestroy() {
    this.$refs.video.removeEventListener('timeupdate', this.updateProgress)
    this.$refs.video.removeEventListener('loadedmetadata')
  }
}
</script>

<style>
.video-player {
  width: 600px;
  height: 400px;
  background-color: black;
}

video {
  width: 100%;
  height: 100%;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
}

button {
  margin-right: 10px;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  margin: 0 10px;
  background-color: #ccc;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
}

.time {
  margin-left: 10px;
}

.icon {
  width: 24px;
  height: 24px;
}

.icon-play {
  display: none;
}

.icon-pause {
  display: block;
}
</style>

使用组件

现在，让我们在 App.vue 文件中使用我们的 VideoPlayer 组件：

<template>
  <div id="app">
    <video-player src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"></video-player>
  </div>
</template>

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

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

<style>
</style>