2.1.5 • Published 1 year ago

video-slice v2.1.5

Weekly downloads
-
License
ISC
Repository
-
Last release
1 year ago

视频切片库,可获取视频某一帧或多帧的图片

使用方法

1.npm安装

npm i video-slice

2.引入

import { videoSlice } from "video-slice";

3.视频切片使用示例

import { videoSlice } from "video-slice";
const inputDom = document.getElementById("chooseFile");
inputDom?.addEventListener("change",(res)=>{
    const input:any = res.target
    //videoToImg为返回的实例
    const videoToImg = videoSlice({
        width:100, //宽度
        file:input.files[0], //视频文件
        success:()=>{
            //获取某个时间点的切片
            // videoToImg.setCurrentTime(0,1)
            //快速切片
            videoToImg.fastStart();
            //自动切片
            // videoToImg.start();
        },
        backImgFn:(res)=>{ //切片返回的地方
            console.log("返回的base64图片:"+res)
        },
        finish:()=>{
            console.log("完成")
        }
    })
})

参数结构

参数说明类型可选值默认值
video视频dom节点HTMLVideoElement--
width返回的图片宽度number/string-video的宽度
height返回的图片高度number/string-video的高度
file视频文件,video如没src就必须传该参数File--
intervalTime当前视频切图的间隔多少毫秒,最小生效时间number≥2001000
muted是否静音booleantrue/falsetrue
success当视频加载完成触发,后续操作在这个函数里面执行() => void--
fail报错触发函数(value: string) => void--
finish完成自动切片后触发() => void--
backImgFn每次切片都会触发的返回base64的图片(value: string) => void--

方法说明

方法名称说明参数参数是否必传
start正常速度开始切片--
fastStart快速间隔一定时间(毫秒)切片number 默认:200(需≥30)
getSrc返回视频地址--
getImgs获取切过的时间对应的图片对象--
FileToBase64传入文件返回base64视频文件
setIntervalTime设置的间隔时间(毫秒)number
setCurrentTime切片第几秒的t:number, isSetTime:booleant:是, isSetTime:否
destroy销毁监听等--