当前位置：首页 > VUE

vue实现短视频

2026-03-09 22:32:33VUE

Vue 实现短视频功能

基础项目搭建

使用 Vue CLI 创建项目，安装必要依赖：

vue create short-video-app
cd short-video-app
npm install vue-router axios vuex

视频播放组件开发

创建视频播放组件 VideoPlayer.vue：

vue实现短视频

<template>
  <div class="video-container">
    <video 
      ref="videoPlayer" 
      :src="videoSrc" 
      @click="togglePlay"
      @ended="handleEnded"
      controls
    ></video>
  </div>
</template>

<script>
export default {
  props: ['videoSrc'],
  methods: {
    togglePlay() {
      const video = this.$refs.videoPlayer
      video.paused ? video.play() : video.pause()
    },
    handleEnded() {
      this.$emit('ended')
    }
  }
}
</script>

<style scoped>
.video-container {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
}
video {
  width: 100%;
  height: auto;
  object-fit: cover;
}
</style>

视频列表实现

创建视频列表组件 VideoList.vue：

<template>
  <div class="video-list">
    <VideoPlayer 
      v-for="(video, index) in videos" 
      :key="index"
      :videoSrc="video.src"
      @ended="playNext(index)"
    />
  </div>
</template>

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

export default {
  components: { VideoPlayer },
  data() {
    return {
      videos: [
        { src: '/videos/video1.mp4' },
        { src: '/videos/video2.mp4' }
      ]
    }
  },
  methods: {
    playNext(currentIndex) {
      const nextIndex = (currentIndex + 1) % this.videos.length
      // 实际项目中这里可能需要触发滚动到下一个视频
    }
  }
}
</script>

滑动切换功能

实现垂直滑动切换视频：

vue实现短视频

<template>
  <div 
    class="swiper-container"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    <!-- 视频列表内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      startY: 0,
      currentVideoIndex: 0
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startY = e.touches[0].clientY
    },
    handleTouchMove(e) {
      e.preventDefault()
    },
    handleTouchEnd(e) {
      const endY = e.changedTouches[0].clientY
      const diffY = endY - this.startY

      if (Math.abs(diffY) > 50) {
        if (diffY > 0) {
          // 向下滑动，切换到上一个视频
          this.currentVideoIndex = Math.max(0, this.currentVideoIndex - 1)
        } else {
          // 向上滑动，切换到下一个视频
          this.currentVideoIndex = Math.min(this.videos.length - 1, this.currentVideoIndex + 1)
        }
        // 实际项目中这里需要实现视频切换动画
      }
    }
  }
}
</script>

后端数据交互

使用 Axios 获取视频列表：

// api/video.js
import axios from 'axios'

export const getVideoList = (params) => {
  return axios.get('/api/videos', { params })
}

在 Vuex 中管理视频状态：

// store/modules/video.js
const state = {
  videoList: [],
  currentVideo: null
}

const mutations = {
  SET_VIDEO_LIST(state, list) {
    state.videoList = list
  },
  SET_CURRENT_VIDEO(state, video) {
    state.currentVideo = video
  }
}

const actions = {
  async fetchVideos({ commit }) {
    try {
      const res = await getVideoList()
      commit('SET_VIDEO_LIST', res.data)
      commit('SET_CURRENT_VIDEO', res.data[0])
    } catch (error) {
      console.error(error)
    }
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}