当前位置：首页 > VUE

vue实现短视频

2026-02-18 09:24:03VUE

Vue 实现短视频功能

在 Vue 中实现短视频功能通常涉及视频播放、上传、列表展示等模块。以下是关键实现步骤和代码示例：

vue实现短视频

视频播放组件

使用 video.js 或原生 HTML5 video 标签实现播放器：

vue实现短视频

<template>
  <div class="video-player">
    <video 
      ref="videoPlayer"
      :src="videoUrl"
      controls
      @play="onPlay"
      @pause="onPause"
    ></video>
  </div>
</template>

<script>
export default {
  props: ['videoUrl'],
  methods: {
    onPlay() {
      console.log('Video started playing');
    },
    onPause() {
      console.log('Video paused');
    }
  }
}
</script>

视频上传功能

通过 <input type="file"> 结合 FormData 实现上传：

<template>
  <div>
    <input type="file" accept="video/*" @change="handleUpload">
    <button @click="uploadVideo">Upload</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null
    }
  },
  methods: {
    handleUpload(event) {
      this.selectedFile = event.target.files[0];
    },
    async uploadVideo() {
      const formData = new FormData();
      formData.append('video', this.selectedFile);

      try {
        const response = await axios.post('/api/upload', formData);
        console.log('Upload success:', response.data);
      } catch (error) {
        console.error('Upload failed:', error);
      }
    }
  }
}
</script>

视频列表展示

使用 v-for 渲染视频列表：

<template>
  <div class="video-list">
    <div v-for="video in videos" :key="video.id" class="video-item">
      <video-player :video-url="video.url"></video-player>
      <p>{{ video.title }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videos: [
        { id: 1, title: 'Video 1', url: '/videos/1.mp4' },
        { id: 2, title: 'Video 2', url: '/videos/2.mp4' }
      ]
    }
  }
}
</script>