uni-app 视频根据设定的时间进行切片

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app 视频根据设定的时间进行切片

通过视频所在地址获取到手机本地视频，然后将视频按照规定的时间（比如3分钟，时间可配置）进行切片，将视频切割成n份（比如时长13分钟的视频，按照每3分钟切割一块，共5段，但是5段合在一起要是完整的），并返回给我可以进行上传的视频或者视频地址。

Harmonyos Next教程
3 回复

大文件切片、分块、分段、分片，可用于分块上传、断点续传(ios、android):https://ext.dcloud.net.cn/plugin?id=3319


双端原生插件QQ 583069500

在处理视频切片的需求时，可以使用 uni-app 调用原生的视频处理库来实现。由于 uni-app 是一个多端框架，直接在前端进行视频切片操作会比较困难且性能受限，通常我们会借助服务器端或原生插件来完成这项任务。

以下是一个基于 uni-app 调用原生插件进行视频切片的示例。假设你已经在服务器端实现了一个视频切片的服务，你可以通过 HTTP 请求来调用这个服务。

前端部分（uni-app）

  1. 安装 Axios 用于 HTTP 请求

    npm install axios

  2. 页面代码

    <template>
  <view>
    <button @click="sliceVideo">Slice Video</button>
  </view>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    async sliceVideo() {
      try {
        const videoPath = 'path/to/your/video.mp4'; // 视频文件路径
        const startTime = 10; // 切片开始时间（秒）
        const endTime = 20; // 切片结束时间（秒）

        const response = await axios.post('http://your-server.com/slice-video', {
          videoPath,
          startTime,
          endTime
        });

        console.log('Video sliced successfully:', response.data);
      } catch (error) {
        console.error('Error slicing video:', error);
      }
    }
  }
};
</script>

后端部分（Node.js 示例）

后端可以使用 fluent-ffmpeg 库来处理视频切片。

  1. 安装依赖

    npm install express multer fluent-ffmpeg

  2. 服务器代码

    const express = require('express');
const multer = require('multer');
const ffmpeg = require('fluent-ffmpeg');
const path = require('path');
const fs = require('fs');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/slice-video', upload.single('video'), (req, res) => {
  const { startTime, endTime } = req.body;
  const videoPath = req.file.path;
  const outputPath = path.join(__dirname, 'outputs', 'sliced_video.mp4');

  ffmpeg(videoPath)
    .setStartTime(startTime)
    .setDuration(endTime - startTime)
    .outputOptions('-c copy')
    .save(outputPath, (err, stdout, stderr) => {
      if (err) {
        console.error('Error slicing video:', err);
        return res.status(500).send('Error slicing video');
      }

      fs.unlink(videoPath, () => {}); // 可选：删除上传的原始视频

      res.send({ message: 'Video sliced successfully', outputPath });
    });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

以上代码展示了如何在 uni-app 中调用后端服务进行视频切片的基本流程。请注意，实际应用中需要考虑更多的错误处理和安全性问题。

回到顶部