js截屏 video_video结合canvas实现视频在线截图功能

给大家讲解下我前几天看到的一个有趣小demo：视频在线截图。以下是我修改和添加了新功能后的效果图：

是不是很酷，其实挺简单的，下面就给大家讲讲怎么弄哈。

这里主要分为三大块功能，首先是第一个：

利用URL对象获取视频链接并展示：

js的URL对象有个 createObjectURL 方法，它可以获取一个文件(File对象)的url，然后插入到 video 元素的 src 特性中，这样就可以实现视屏的展示了。当然如何获取File对象呢，方法有种，比如使用input元素，或者使用拖动的方式。一个完整的代码段：

document.querySelector('input[type="file"]').addEventListener('change',function () {

document.querySelector('video').src = window.URL.createObjectURL(this.files[0])

})

当然源码中我并不是这样写的，仅仅是为了给大家一个演示而已。关于URL更加具体的使用，大家可以看看这篇文章或者MDN。

利用canvas实现视频截图：

接下来就是关键步骤了，但也很简单，那就是使用 canvas 的 drawImage 方法，大家如果翻到高程三的第15.2.6节，就会发现 drawImage 的方法的使用描述得非常详细，但漏讲了一个，那就是 video 元素也可传入 draw