当前位置：首页 > VUE

vue实现视频播放暂停

2026-01-20 10:46:43VUE

实现视频播放与暂停功能

在Vue中实现视频播放和暂停功能可以通过操作HTML5的<video>元素来完成。以下是具体实现方法：

基础实现

创建Vue组件，包含视频元素和控制按钮：

<template>
  <div>
    <video ref="videoPlayer" width="400" controls>
      <source src="your-video.mp4" type="video/mp4">
    </video>
    <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPlaying: false
    }
  },
  methods: {
    togglePlay() {
      const video = this.$refs.videoPlayer
      if (this.isPlaying) {
        video.pause()
      } else {
        video.play()
      }
      this.isPlaying = !this.isPlaying
    }
  }
}
</script>

使用自定义指令

可以创建自定义指令来简化视频控制：

<template>
  <div>
    <video v-video-control width="400">
      <source src="your-video.mp4" type="video/mp4">
    </video>
    <button @click="togglePlay">播放/暂停</button>
  </div>
</template>

<script>
export default {
  directives: {
    'video-control': {
      inserted(el) {
        el.controls = false
      }
    }
  },
  methods: {
    togglePlay() {
      const video = this.$el.querySelector('video')
      video.paused ? video.play() : video.pause()
    }
  }
}
</script>

使用状态管理

对于复杂应用，可以使用Vuex管理播放状态：

// store.js
export default new Vuex.Store({
  state: {
    isPlaying: false
  },
  mutations: {
    togglePlay(state) {
      state.isPlaying = !state.isPlaying
    }
  }
})

<!-- 组件中使用 -->
<template>
  <div>
    <video ref="videoPlayer" width="400">
      <source src="your-video.mp4" type="video/mp4">
    </video>
    <button @click="togglePlay">{{ $store.state.isPlaying ? '暂停' : '播放' }}</button>
  </div>
</template>

<script>
export default {
  methods: {
    togglePlay() {
      const video = this.$refs.videoPlayer
      if (this.$store.state.isPlaying) {
        video.pause()
      } else {
        video.play()
      }
      this.$store.commit('togglePlay')
    }
  }
}
</script>

响应视频事件

监听视频原生事件来同步状态：

<template>
  <div>
    <video 
      ref="videoPlayer" 
      width="400"
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
    >
      <source src="your-video.mp4" type="video/mp4">
    </video>
    <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPlaying: false
    }
  },
  methods: {
    togglePlay() {
      const video = this.$refs.videoPlayer
      video.paused ? video.play() : video.pause()
    },
    onPlay() {
      this.isPlaying = true
    },
    onPause() {
      this.isPlaying = false
    },
    onEnded() {
      this.isPlaying = false
    }
  }
}
</script>

使用第三方库

对于更复杂的需求，可以考虑使用专门的视频播放器库：

安装vue-video-player：
```
npm install vue-video-player
```

使用示例：


<template>
<div>
 <video-player 
   ref="videoPlayer"
   :options="playerOptions"
   @play="onPlayerPlay"
   @pause="onPlayerPause"
 />
 <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
</div>
</template>

import { videoPlayer } from 'vue-video-player'

export default { components: { videoPlayer }, data() { return { isPlaying: false, playerOptions: { sources: [{ src: 'your-video.mp4', type: 'video/mp4' }] } } }, methods: { togglePlay() { const player = this.$refs.videoPlayer.player player.paused ? player.play() : player.pause() }, onPlayerPlay() { this.isPlaying = true }, onPlayerPause() { this.isPlaying = false } } }

vue实现视频播放暂停