方法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)