video-slice
TypeScript icon, indicating that this package has built-in type declarations

2.1.5 • Public • Published

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

使用方法

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 ≥200 1000
muted 是否静音 boolean true/false true
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:boolean t:是, isSetTime:否
destroy 销毁监听等 - -

Package Sidebar

Install

npm i video-slice

Weekly Downloads

0

Version

2.1.5

License

ISC

Unpacked Size

10.4 kB

Total Files

4

Last publish

Collaborators

  • chenyongjie123