方法1：
使用 canvas绘制
let canvas = document.createElement(‘canvas’)
video.addEventListener(‘loadeddata’, () => { // loadeddata 在第一帧数据加载完之后触发
canvas.width = elm.clientWidth // 设置 canvas 宽高与video容器一致
canvas.height = elm.clientHeight
canvas.getContext(‘2d’).drawImage(video, 0, 0, canvas.width, canvas.height)
/** getContext(‘2d’) 建立二维渲染上下文
* drawImage 在canvas上绘制图像，传入绘制到上下文的元素可以是：
* 1. CSSImageValue
* 2. HTMLImageElement
* 3. SVGImageElement
* 4. HTMLVideoElement
* 5. HTMLVideoElement
* 6. HTMLCanvasElement
* 7. ImageBitmap
* 8. OffscreenCanvas
*/
elm.appendChild(canvas)
})
方法2：
在视频的标签的 src 属性后加上一个时间戳 #t，表示显示视频时从这个时间开始，默认其为显示的第一帧。在部分安卓机型上不生效
function addPreviewVideo(content) {
//添加preload = “metadata”
let contentAdded = content.replace(/preload.*?([^\s^\>]+)/g, ‘preload=”metadata”‘)
contentAdded.match(/)/g).forEach( item => {
contentAdded = item.indexOf(‘preload’) === -1 ?
contentAdded.replace(item,item.replace(/
})
//url末尾加上#t={seconds}
contentAdded.match(/|\/>)/g).forEach(item => {
let srcCurrent = item.match(/src=\”([^\”]*)\”/)[1]
contentAdded = contentAdded.replace(srcCurrent, srcCurrent + ‘#t=2’)
})
return contentAdded
}