视频标注插件

这是一个视频标注的组件，可以对视频的任何一帧截图并且在截图中做标注、保存截图。

在线demo

使用时直接把本git项目中components文件夹下的video-snapshot文件夹复制到需要引用的项目中，然后引入组件使用：

template:

<VideoSnapshot :play-list="PlayList" @get-image-list="getImageList" />

js:

<script> import VideoSnapshot from "@/components/video-snapshot"; export default { components: { VideoSnapshot }, data() { return { PlayList: [//传入组件的播放列表 { id: 1, name: "test1", url: "ge.mp4" }, { id: 2, name: "test2", url: "47HK2MpfKwqx1510325093.mp4" } ] }; }, methods: { /** * 视频标注成功后触发 * * @param {Object} imageItem 当前标注完成的对象 * */ getImageList(imageItem) { console.log(imageItem) }, } }; </script> DEMO

本项目可下载到本地，作为demo参考。

│ ├── App.vue # 引入了video-snapshot组件，并在该页面有使用demo └── components └── video-snapshot # 封装video-snapshot组件文件夹 启动demo项目

# 克隆项目 git clone https://github.com/sivanZhang/video-snapshot.git # 进入项目目录 cd 项目目录 # 安装依赖 npm install # 启动服务 npm run serve 视频预览效果