更新记录

1.0.0（2025-08-22） 下载此版本

功能点

视频进度条拖拽获取实时画面到图片

平台兼容性

uni-app(4.07)

Uni-app 通用视频封面截取功能

这是一个功能强大的 Uni-app 视频封面截取组件，支持自由拖拽进度截取，并提供自定义配置和事件回调。

重要

本插件依赖于（需要先引入）进度条拖拽插件https://ext.dcloud.net.cn/plugin?id=11613，否则功能无法正常使用

安装与使用

1. 将组件代码保存到本地

下载程序包，将提供的 .vue 文件代码保存到你的项目目录中，例如 components/video-cover-extraction/video-cover-extraction.vue。

2. 在页面中引入并使用

在你的页面 .vue 文件中，按照以下方式引入并注册组件：

使用方法（至于怎么上传需要自己去研究，最近太忙了）

<template>
    <view>
        <image :src="src" style="width: 100vw;height: 100vw;" mode="aspectFit"></image>
        <videoCoverExtraction :visible="visible" :path="tempFilePath" @success="success" @error="error" @confirm="confirm" />
        <button @tap="select">加载视频</button>
    </view>
</template>

<script>
import videoCoverExtraction from '@/components/video-cover-extraction/video-cover-extraction.vue'

export default {
    components: {
        videoCoverExtraction
    },
    data () {
        return {
            // 视频临时地址
            tempFilePath: '',
            // 封面图片地址
            src: '',
            visible: false
        }
    },
    methods: {
        // 选择视频
        async select () {
            const { tempFilePath } = await uni.chooseVideo()
            if (tempFilePath) {
                this.visible = true
                this.tempFilePath = tempFilePath
            } else {
                this.tempFilePath = ''
            }
        },

        // 视频封面提取成功
        confirm (o) {
            this.src = o
            this.visible = false
        }

    }
}
</script>