当前位置：首页 > VUE

vue前端实现视频裁剪

2026-02-23 11:33:57VUE

视频裁剪的前端实现方案

在Vue中实现视频裁剪功能，通常需要结合HTML5的<video>元素和Canvas API，以下是几种常见方法：

使用video.js与canvas结合

安装video.js依赖：

npm install video.js

在Vue组件中引入：

import videojs from 'video.js'
import 'video.js/dist/video-js.css'

模板部分：

<video id="my-video" class="video-js" controls preload="auto"></video>
<canvas id="crop-canvas" width="500" height="300"></canvas>
<button @click="cropVideo">裁剪视频</button>

方法实现：

vue前端实现视频裁剪

methods: {
  initVideo() {
    this.player = videojs('my-video', {
      sources: [{
        src: 'your-video.mp4',
        type: 'video/mp4'
      }]
    })
  },
  cropVideo() {
    const video = document.getElementById('my-video')
    const canvas = document.getElementById('crop-canvas')
    const ctx = canvas.getContext('2d')

    ctx.drawImage(
      video, 
      50, 50,  // 裁剪起始坐标
      400, 250, // 裁剪宽高
      0, 0,    // 画布放置位置
      500, 300 // 画布显示尺寸
    )

    const croppedData = canvas.toDataURL('image/png')
    // 处理裁剪后的数据
  }
}

使用第三方库vue-video-player

安装依赖：

npm install vue-video-player

组件实现：

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

export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      playerOptions: {
        sources: [{
          type: "video/mp4",
          src: "your-video.mp4"
        }]
      }
    }
  },
  methods: {
    cropVideoFrame() {
      const video = this.$refs.videoPlayer.player.tech().el()
      const canvas = document.createElement('canvas')
      canvas.width = 400
      canvas.height = 300

      const ctx = canvas.getContext('2d')
      ctx.drawImage(video, 0, 0, 400, 300)

      // 获取裁剪后的图像数据
      const imageData = canvas.toDataURL()
    }
  }
}

实现完整视频裁剪(非单帧)

对于需要裁剪视频片段而非单帧的情况，可以使用MediaSource API：

vue前端实现视频裁剪

async function trimVideo(videoFile, startTime, endTime) {
  const videoBlob = await fetch(videoFile)
    .then(r => r.blob())

  const mediaSource = new MediaSource()
  const video = document.createElement('video')
  video.src = URL.createObjectURL(mediaSource)

  mediaSource.addEventListener('sourceopen', () => {
    const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')

    // 这里需要实现视频的切片逻辑
    // 通常需要使用FFmpeg.js等工具在浏览器端处理
  })

  return video
}

使用FFmpeg.js处理视频

对于复杂的视频裁剪操作，可以集成FFmpeg.js：

安装：

npm install @ffmpeg/ffmpeg @ffmpeg/core

组件实现：

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'

export default {
  methods: {
    async cropVideoWithFFmpeg(file) {
      const ffmpeg = createFFmpeg({ log: true })
      await ffmpeg.load()

      ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(file))

      await ffmpeg.run(
        '-i', 'input.mp4',
        '-ss', '00:00:05',  // 开始时间
        '-to', '00:00:10',  // 结束时间
        '-vf', 'crop=400:300:50:50', // 裁剪参数
        'output.mp4'
      )

      const data = ffmpeg.FS('readFile', 'output.mp4')
      return URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }))
    }
  }
}