更新记录

1.0.2（2025-02-18） 下载此版本

修改了部分bug

1.0.1（2025-02-18） 下载此版本

修改了部分bug

1.0.0（2025-02-18） 下载此版本

初始版本

平台兼容性

zmt-circular-progress

模版中是采用了uniapp基础组件<video></video>，可以自定义宽高、播放视频l链接，直接返回截取视频的第一针和视频链接地址。默认截取的图片大小为原视频的1/2，也就是宽和高都会缩小一半，如果想改变尺寸，请自行到插件中心去修改，下面有详细的修改方法。

使用方法：

配置easycom规则后，自动按需引入，无需import组件，直接引用即可。

<template>
    <view class="index-box">
        <zmt-capture-video-image videoPath="https://mp-2298d5e4-aa54-4efc-a8b7-bbb75295a007.cdn.bspapp.com/cloudstorage/00a5bd21-d2e3-4316-9fa3-13b3a2f353ff.mp4" @result="videoImagePath"></zmt-capture-video-image>

        <!--视频主图-->
        <view class="left video-image">

        </view>
    </view>
    <!--音频播放列表-->
</template> 

调用页面完整代码

<template>
    <view class="index-box">
        <zmt-capture-video-image videoPath="https://mp-2298d5e4-aa54-4efc-a8b7-bbb75295a007.cdn.bspapp.com/cloudstorage/00a5bd21-d2e3-4316-9fa3-13b3a2f353ff.mp4" @result="videoImagePath"></zmt-capture-video-image>

        <!--视频主图-->
        <view class="left video-image">

        </view>
    </view>
    <!--音频播放列表-->
</template> 

<style scoped>
    .video-image{wdith:80%;height:300px;margin-left:10%;}
    .index-box{width:100%;height:300px;}
</style>

<script> 
    export default {
        data() {
            return {

            }
        },
        methods: {
            videoImagePath(result){
                console.log('截取的图片结果',result);
            }
        }
    }
</script>

所有的大小值单位均为px

插件属性

插件事件

二次开发说明

如果你想更改截取的图片尺寸的话，请修改插件源文件，zmt-capture-video-image/components/zmt-capture-video-image/zmt-capture-video-image.vue

大概在90行左右的位置

var width =  parseInt(video.videoWidth/2);//除以2就是原视频的二分之一大小
var height = parseInt(video.videoHeight/2);