vue+flask实现视频合成功能(拖拽上传)

下面是详细讲解“vue+flask实现视频合成功能(拖拽上传)”的完整攻略。

总体思路

这个项目的目的是实现用户可以通过拖拽上传多个视频文件，并将这些视频文件拼接成一个新的视频文件自定义保存，同时该视频文件可以在前端进行预览播放。

具体的实现方案是：前端使用vue框架构建视图，并使用dropzone.js插件实现文件的拖拽上传；后端使用flask框架运行python代码，使用moviepy库处理视频文件进行拼接，并使用FFmpeg库进行视频格式转换等操作。

Vue前端部分

安装依赖

首先，需要通过npm安装vue和dropzone.js两个依赖包。

# 安装vue
npm install vue

# 安装dropzone.js
npm install dropzone

编写HTML模板

在HTML模板中设置一个容器来包含dropzone，实现拖拽上传的功能。

<template>
  <div id="app">
    <div class="dropzone" id="myDropzone"></div>
  </div>
</template>

初始化dropzone

在Vue组件的mounted钩子中，使用dropzone对容器进行初始化。

mounted() {
  // 初始化dropzone
  new Dropzone("div#myDropzone", {
    url: "/upload",
    paramName: "file",
    maxFilesize: 200,
    maxFiles: 20,
    clickable: true,
    addRemoveLinks: true,
    acceptedFiles: "video/*"
  });
}

该代码中，Dropzone的构造参数包括以下几个：

• url: 文件上传的目标地址；
• paramName: 文件参数名，默认为file；
• maxFilesize: 文件大小限制，单位为MB，默认为3MB；
• maxFiles: 最多上传文件数，默认为null；
• clickable: 是否启用点击上传，默认为true；
• addRemoveLinks: 是否添加删除链接，默认为false；
• acceptedFiles: 接受的文件类型，默认为所有类型。在本项目中，我们只接受video类型的文件。

拼接视频文件

在前端上传完成后，需要将上传的文件名传递给后端进行视频文件的拼接和格式转换。可以通过向后端发送一次POST请求实现参数的传递。

// 上传完成事件
dropzone.on("complete", function(file) {
  // 向后端发送POST请求
  axios.post('/merge', {
    filename: file.upload.filename
  })
  .then(function(response) {
    // 操作成功
  })
  .catch(function(error) {
    // 操作失败
  });
});

这里使用了axios库发送POST请求，并将上传的文件名作为参数传递给后端。

Flask后端部分

安装依赖

Python中需要安装flask、moviepy和FFmpeg三个库。

# 安装flask
pip install flask

# 安装moviepy
pip install moviepy

# 安装FFmpeg
apt install ffmpeg

在Ubuntu系统中，通过apt命令安装FFmpeg库。

编写后端程序

接下来，需要编写后端的程序来实现视频文件的拼接操作。根据前端的POST请求，后端需要将上传的视频文件进行合并，并将合并后的视频文件保存为新的文件，然后将该文件的地址返回给前端。

首先，需要定义路由和视图函数。

from flask import Flask, request, jsonify, send_file
from mergevideo import merge

app = Flask(__name__)

@app.route('/merge', methods=['POST'])
def merge_video():
    filename = request.form.get('filename')
    path = 'upload/' + filename
    try:
        # 调用merge函数处理视频合成
        new_file = merge(path)
        return jsonify({'code': 0, 'message': 'success', 'data': {'url': new_file}})
    except Exception as e:
        return jsonify({'code': -1, 'message': str(e)})

上述代码中，我们使用了Flask的路由装饰器定义路由，并使用request获取前端传递的filename参数。然后调用merge函数进行视频处理，并将处理后的新文件的地址返回给前端。

接下来，需要定义merge函数，实现视频文件拼接的功能。该函数调用moviepy库进行拼接操作，并使用FFmpeg进行格式转换。

import os
from moviepy.editor import *

def merge(path):
    # 读取上传的多个视频文件
    files = os.listdir(path)
    clips = [VideoFileClip(path + '/' + f) for f in files]

    # 拼接视频文件
    final_clip = concatenate_videoclips(clips)

    # 定义新视频文件的保存路径及名称
    new_file = path + '/all.mp4'

    # 格式转换为mp4文件
    final_clip.write_videofile(new_file, codec='libx264', fps=24)

    return new_file

该函数的具体实现流程为：使用os库列出路径中的所有上传视频文件；使用moviepy库将多个视频文件合并成一个视频文件；使用FFmpeg库将视频文件格式转换为mp4文件；返回新文件的地址。

最后，需要使用Flask提供的send_file函数将生成的新文件返回给前端进行播放。

@app.route('/play/<path:url>')
def play_video(url):
    return send_file(url)

示例演示

为了更好地展示和演示该功能，我们提供了一个示例，在上传视频文件后，会将上传的视频文件进行拼接，并把合成后的视频文件返回给前端进行播放。

具体演示步骤如下：

安装依赖包

# 安装Vue.js和Dropzone.js
npm install vue dropzone

编写Vue组件

在Vue组件中，需要初始化dropzone控件，并在上传完成后向后端发送POST请求将视频文件进行拼接。

<template>
  <div class="container">
    <h1>Video Merger</h1>
    <div id="myDropzone" class="dropzone"></div>
    <div class="play-area">
      <video class="video-player" ref="videoPlayer" controls></video>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Dropzone from 'dropzone'

export default {
  name: 'VideoMerger',
  mounted() {
    // 初始化dropzone
    let dropzone = new Dropzone('div#myDropzone', {
      url: '/upload',
      paramName: 'file',
      maxFilesize: 200,
      maxFiles: 20,
      clickable: true,
      addRemoveLinks: true,
      acceptedFiles: 'video/*'
    })

    // 上传完成事件
    dropzone.on('complete', function(file) {
      // 向后端发送POST请求
      axios.post('/merge', {
        filename: file.upload.filename
      })
      .then(function(response) {
        // 操作成功
        this.preview(response.data.data.url)
      }.bind(this))
      .catch(function(error) {
        // 操作失败
        console.log(error)
      })
    })
  },
  methods: {
    // 播放视频文件
    preview(url) {
      this.$refs.videoPlayer.src = url
      this.$refs.videoPlayer.play()
    }
  }
}
</script>

编写后端程序

后端程序定义两个路由：一个用于上传视频文件，另一个用于拼接视频文件并返回生成的新文件地址。

from flask import Flask, request, send_file

app = Flask(__name__)

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    file.save(os.path.join('upload', file.filename))
    return file.filename

@app.route('/merge', methods=['POST'])
def merge():
    filename = request.json['filename']
    return video_merge(filename)

def video_merge(filename):
    # 将视频文件进行拼接并保存
    result = 'upload/' + filename.rsplit('.')[0] + '.mp4'
    path = 'upload/'

    clips = []

    for file in sorted(os.listdir(path)):
        if file.startswith(filename.rsplit('.')[0]):
            clip = VideoFileClip(os.path.join(path, file)).resize(height=360)
            clips.append(clip)

    final_clip = concatenate_videoclips(clips, method='compose')
    final_clip.write_videofile(result)

    return result

@app.route('/play/<path:url>')
def play_video(url):
    return send_file(url)

该程序使用os库读取上传的视频文件，使用moviepy库将视频文件拼接成一个新的视频文件，使用FFmpeg库将视频文件格式转换为mp4文件，并使用send_file函数返回给客户端进行播放。

运行程序

启动服务，在浏览器中输入URL: http://localhost:5000，选择多个视频文件拖拽到区域中，上传完成后可以进行视频预览播放。

总结

本项目实现了使用vue和flask框架结合moviepy库和FFmpeg库，实现了视频拖拽上传和拼接的工能，前端使用了dropzone.js插件来实现文件上传和展示，后端使用了moviepy库进行视频文件的处理操作，并使用FFmpeg库进行视频格式转换，最后将合成后的视频文件进行播放。该项目对于在开发中需要处理视频相关业务场景的开发人员有一定的参考意义。