Vue3实现本地视频选择与展示的完整方案

1. 项目概述：Vue3本地视频选择与展示方案

在Web应用开发中，视频处理是常见的功能需求。Vue3作为当前主流的前端框架，其组合式API和响应式系统为视频处理提供了优雅的解决方案。本文将详细介绍如何在Vue3项目中实现从本地选择视频文件并在页面中展示的完整流程。

这个功能看似简单，但涉及多个关键技术点：文件选择、视频预览、性能优化等。我们不仅要实现基本功能，还要考虑用户体验和性能表现。通过本文，你将掌握一套可直接用于生产环境的实现方案。

2. 核心功能实现

2.1 文件选择与处理

首先需要实现文件选择功能。HTML5提供了原生的文件选择器，我们可以通过Vue3的ref来获取DOM元素并监听change事件：

html复制<template>
  <input 
    type="file" 
    ref="fileInput"
    accept="video/*"
    @change="handleFileChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const fileInput = ref(null)
const selectedFile = ref(null)

const handleFileChange = (e) => {
  const file = e.target.files[0]
  if (!file) return
  
  // 验证文件类型
  if (!file.type.startsWith('video/')) {
    alert('请选择有效的视频文件')
    return
  }
  
  selectedFile.value = file
}
</script>

这里有几个关键点需要注意：

1. 通过accept属性限制只能选择视频文件
2. 使用ref获取DOM元素引用
3. 在change事件处理中进行文件类型验证

2.2 视频预览实现

获取到文件后，我们需要将其转换为可播放的URL。这里可以使用URL.createObjectURL()方法：

javascript复制const videoUrl = ref('')

const previewVideo = () => {
  if (!selectedFile.value) return
  
  // 释放之前的URL防止内存泄漏
  if (videoUrl.value) {
    URL.revokeObjectURL(videoUrl.value)
  }
  
  videoUrl.value = URL.createObjectURL(selectedFile.value)
}

在模板中添加视频播放器：

html复制<video 
  v-if="videoUrl"
  :src="videoUrl"
  controls
  class="video-preview"
></video>

重要提示：使用完ObjectURL后一定要调用URL.revokeObjectURL()释放内存，否则可能导致内存泄漏。

3. 功能优化与扩展

3.1 文件大小限制

在实际应用中，我们通常需要限制上传视频的大小：

javascript复制const MAX_FILE_SIZE = 100 * 1024 * 1024 // 100MB

const handleFileChange = (e) => {
  const file = e.target.files[0]
  if (!file) return
  
  if (file.size > MAX_FILE_SIZE) {
    alert('视频文件大小不能超过100MB')
    return
  }
  
  // 其他处理...
}

3.2 视频元数据获取

有时我们需要获取视频的时长、分辨率等信息：

javascript复制const getVideoMetadata = (file) => {
  return new Promise((resolve) => {
    const video = document.createElement('video')
    video.preload = 'metadata'
    
    video.onloadedmetadata = () => {
      resolve({
        duration: video.duration,
        width: video.videoWidth,
        height: video.videoHeight
      })
    }
    
    video.src = URL.createObjectURL(file)
  })
}

// 使用方式
const metadata = await getVideoMetadata(selectedFile.value)
console.log('视频时长:', metadata.duration)

3.3 自定义样式与交互

默认的文件选择器和视频播放器样式可能不符合项目需求，我们可以通过CSS进行美化：

css复制.custom-file-input {
  display: none;
}

.file-input-label {
  display: inline-block;
  padding: 10px 15px;
  background: #3498db;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.file-input-label:hover {
  background: #2980b9;
}

.video-preview {
  max-width: 100%;
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

4. 完整实现代码

以下是完整的Vue3组件实现：

html复制<template>
  <div class="video-uploader">
    <label class="file-input-label">
      选择视频文件
      <input 
        type="file" 
        class="custom-file-input"
        accept="video/*"
        @change="handleFileChange"
      />
    </label>
    
    <div v-if="isLoading" class="loading">加载中...</div>
    
    <div v-if="error" class="error">{{ error }}</div>
    
    <div v-if="videoUrl" class="video-container">
      <video 
        :src="videoUrl"
        controls
        class="video-preview"
        @loadedmetadata="handleLoadedMetadata"
      ></video>
      
      <div v-if="metadata" class="video-info">
        <p>时长: {{ formatDuration(metadata.duration) }}</p>
        <p>分辨率: {{ metadata.width }} × {{ metadata.height }}</p>
        <p>大小: {{ formatFileSize(selectedFile.size) }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const MAX_FILE_SIZE = 100 * 1024 * 1024 // 100MB

const selectedFile = ref(null)
const videoUrl = ref('')
const isLoading = ref(false)
const error = ref('')
const metadata = ref(null)

const handleFileChange = async (e) => {
  const file = e.target.files[0]
  if (!file) return
  
  // 重置状态
  error.value = ''
  isLoading.value = true
  
  try {
    // 验证文件类型
    if (!file.type.startsWith('video/')) {
      throw new Error('请选择有效的视频文件')
    }
    
    // 验证文件大小
    if (file.size > MAX_FILE_SIZE) {
      throw new Error('视频文件大小不能超过100MB')
    }
    
    selectedFile.value = file
    
    // 创建预览URL
    if (videoUrl.value) {
      URL.revokeObjectURL(videoUrl.value)
    }
    videoUrl.value = URL.createObjectURL(file)
    
    // 获取元数据
    metadata.value = await getVideoMetadata(file)
  } catch (err) {
    error.value = err.message
  } finally {
    isLoading.value = false
  }
}

const getVideoMetadata = (file) => {
  return new Promise((resolve) => {
    const video = document.createElement('video')
    video.preload = 'metadata'
    
    video.onloadedmetadata = () => {
      resolve({
        duration: video.duration,
        width: video.videoWidth,
        height: video.videoHeight
      })
      URL.revokeObjectURL(video.src)
    }
    
    video.src = URL.createObjectURL(file)
  })
}

const formatDuration = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = Math.floor(seconds % 60)
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}

const formatFileSize = (bytes) => {
  if (bytes < 1024) return `${bytes} B`
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
}

const handleLoadedMetadata = (e) => {
  console.log('视频已加载元数据', e.target)
}
</script>

<style scoped>
.video-uploader {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.custom-file-input {
  display: none;
}

.file-input-label {
  display: inline-block;
  padding: 10px 15px;
  background: #3498db;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.file-input-label:hover {
  background: #2980b9;
}

.loading, .error {
  margin-top: 15px;
  padding: 10px;
  border-radius: 4px;
}

.loading {
  background: #f8f9fa;
  color: #6c757d;
}

.error {
  background: #f8d7da;
  color: #721c24;
}

.video-preview {
  max-width: 100%;
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.video-info {
  margin-top: 10px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px;
  font-size: 14px;
}
</style>

5. 常见问题与解决方案

5.1 跨浏览器兼容性问题

不同浏览器对视频格式的支持程度不同。建议：

1. 在用户选择文件时提示支持的格式：

javascript复制const SUPPORTED_FORMATS = ['video/mp4', 'video/webm', 'video/ogg']
const isFormatSupported = SUPPORTED_FORMATS.includes(file.type)

2. 对于不支持的格式，可以使用FFmpeg.js在浏览器端进行转码

5.2 大文件处理优化

对于大视频文件：

1. 使用File.slice()进行分片读取
2. 显示上传进度条
3. 考虑使用Web Worker进行后台处理

5.3 移动端适配

移动端需要注意：

1. 添加capture属性支持摄像头录制：

html复制<input type="file" accept="video/*" capture="environment">

2. 处理横竖屏切换时的布局问题
3. 优化触摸控制体验

5.4 性能优化技巧

1. 使用Intersection Observer实现懒加载
2. 对于列表中的多个视频，只预加载可见区域的视频
3. 使用poster属性设置视频封面，提升用户体验

6. 实际应用场景扩展

6.1 视频裁剪与编辑

可以集成第三方库如FFmpeg.wasm实现简单的视频编辑功能：

javascript复制import { createFFmpeg } from '@ffmpeg/ffmpeg'

const ffmpeg = createFFmpeg({ log: true })

const trimVideo = async (file, startTime, endTime) => {
  await ffmpeg.load()
  ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(file))
  
  await ffmpeg.run(
    '-i', 'input.mp4',
    '-ss', startTime,
    '-to', endTime,
    '-c', 'copy',
    'output.mp4'
  )
  
  const data = ffmpeg.FS('readFile', 'output.mp4')
  return new Blob([data.buffer], { type: 'video/mp4' })
}

6.2 视频上传与云端处理

结合后端API实现完整的上传流程：

javascript复制const uploadVideo = async (file) => {
  const formData = new FormData()
  formData.append('video', file)
  
  try {
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData
    })
    
    if (!response.ok) {
      throw new Error('上传失败')
    }
    
    return await response.json()
  } catch (err) {
    console.error('上传错误:', err)
    throw err
  }
}

6.3 与视频API集成

可以结合WebRTC实现实时视频处理，或使用MediaRecorder API录制视频：

javascript复制let mediaRecorder
let recordedChunks = []

const startRecording = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  mediaRecorder = new MediaRecorder(stream)
  
  mediaRecorder.ondataavailable = (e) => {
    if (e.data.size > 0) {
      recordedChunks.push(e.data)
    }
  }
  
  mediaRecorder.onstop = () => {
    const blob = new Blob(recordedChunks, { type: 'video/webm' })
    videoUrl.value = URL.createObjectURL(blob)
    recordedChunks = []
  }
  
  mediaRecorder.start()
}

const stopRecording = () => {
  mediaRecorder.stop()
}