video-capture
v1.0.2
Published
基于h5 canvas的视频快照插件
Downloads
187
Maintainers
wenlunReadme
效果图
1.安装
- <script>标签引入"dist/video-capture.js"或"dist/video-capture.min.js"
- 使用npm，运行命令：npm install -D video-capture
2.例子
- npm使用
import VideoCapture from 'video-capture'
async test(){
//dataURL 捕获画面的base64
//width画面宽
//height画面高
let { dataURL, width, height } = await new VideoCapture("https://vjs.zencdn.net/v/oceans.mp4").capture("10%");
document.getElementById("imgId").src = dataURL;
}
test();- 使用远程视频地址
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<img id="preview1" />
<img id="preview2" />
<img id="preview3" />
<script src="../dist/video-capture.min.js"></script>
<script>
//方法1、捕获20s处的画面，并使用preview1显示出来
new VideoCapture("https://vjs.zencdn.net/v/oceans.mp4").capture(20, "preview1");
//方法2、捕获20s处的画面，传入img dom
new VideoCapture("https://vjs.zencdn.net/v/oceans.mp4").capture(20, document.getElementById("preview2"));
//方法3、捕获50%处画面
new VideoCapture("https://vjs.zencdn.net/v/oceans.mp4").capture("50%", "preview3"));
</script>
</body>
</html>- 使用本地视频资源
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<input id="inputFile" type="file"/>
<img id="preview"/>
<script src="../dist/video-capture.min.js"></script>
<script>
document.getElementById("inputFile").onchange = function ({ target }) {
let [file] = target.files;
if (!/.*\.mp4$/.test(file.name)) alert("请选择mp4视频文件");
new VideoCapture(file).capture("50%", "preview");
}
</script>
</body>
</html>3.方法&参数
3.1 构造方法 VideoCapture(uri)
- uri：可以是一个远程视频链接，也可以是一个本地视频文件对象
3.2 capture(time,img)方法
- time：指定时间，可以是秒数，如10，也可以是以%结尾的百分数，如'50%'
- img：可以是img标签的id，或img对象，如果有指定，那么会将捕获的画面dataURL赋值给img.src
3.3 revoke() 方法
当构造方法传入的是一个本地视频资源时，在有必要的时候，可以调用revoke方法来释放资源。