Canvas获取视频封面

根据视频url获取视频截图。

以下代码仅在PC浏览器上（Chrome、Firefox、Safari、搜狗浏览器、QQ浏览器）验证过，未验证其他浏览器或移动端浏览器。不同浏览器支持的视频格式不同（HTML的媒体支持:audio和video元素），需事先将视频转换成主流浏览器支持的格式（如MPEG H.264 AAC 编码格式）。

获取视频第一帧

export function genVideoCover(url, callback) {
    const video = document.createElement('video')
    video.src = url
    video.setAttribute('crossorigin', 'anonymous')
    // 视频加载完成时获取第一帧
    video.addEventListener('loadeddata', () => {
       const imageUrl = canvasToDataUrl(video)
        callback && callback(imageUrl)
    })
     video.addEventListener('error', function () {
        callback && callback()
    })
}

export function canvasToDataUrl(video) {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    const imgHeight = video.videoHeight
    const imgWidth = video.videoWidth
    ctx.drawImage(video, 0, 0, imgWidth, imgHeight)
    // 设置图片质量为0.75，如果是缩略图一般取0.35
    return canvas.toDataURL('image/jpeg'， 0.75)
}

获取视频第n秒

有些视频第一帧是黑的，获取到的是纯黑图片，可以改成取视频的第n秒做封面：

export function genVideoCover(url, callback, second = 1) {
    const video = document.createElement('video')
    video.setAttribute('crossorigin', 'anonymous')
    // 取视频第n秒
    video.addEventListener('loadeddata', function () {
        // 设置currentTime
        this.currentTime = second
    })
    video.addEventListener('seeked', function () {
        const imageUrl = canvasToDataUrl(video)
        callback && callback(imageUrl)
    })
     video.addEventListener('error', function () {
        callback && callback()
    })
    video.src = url
}

这里用到媒体事件onseeked：

onseeked在用户重新定位视频/音频（audio/video）的播放位置后触发。

使用currentTime 可以设置或返回视频/音频（audio/video）播放的当前位置。设置了媒体元素的crruentTime值为n，会初始化一个在媒体中跳跃到n秒位置的操作。操作开始时会引起一个seeking事件，随后当跳跃操作完成时会触发seeked事件。