截取视频的第一帧或者任意帧作为视频poster

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input id="input" type="file">
</body>
<script>
  const video = document.createElement('video');
  video.setAttribute('controls', 'controls');
  video.setAttribute('crossOrigin', 'anonymous');	// 处理跨域
  video.setAttribute("preload", "auto");	// 加上preload属性，否则截取第一帧会黑屏
  video.setAttribute('width', 400);
  video.setAttribute('height', 300);
  document.getElementById('input').addEventListener('change', function () {
    document.body.appendChild(video);
    video.src = window.URL.createObjectURL(this.files[0]);  // this.files为File对象数组
  })

  // video.currentTime = 10;  // 可以设置video的时间以跳转到某一帧开始播放，可以截取video任意时刻的图片
  video.addEventListener('loadeddata', function() { // 事件在媒体当前播放位置的视频帧（通常是第一帧）加载完成后触发
    const canvas = document.createElement('canvas');
    const canvasHeight = video.clientHeight;
    const canvasWidth = video.clientWidth;
    // drawImage的第一个参数绘制到上下文的元素。允许任何的画布图像源，本例是video元素
    canvas.getContext('2d').drawImage(this, 0, 0, canvasWidth, canvasHeight);
    // toDataURL方法返回一个包含图片展示的 data URI 。可以使用 type 参数设置其类型
    const dataURL = canvas.toDataURL('image/jpeg'); 
    this.setAttribute('poster', dataURL); // 设置video的封面
  })
</script>
</html>

总结

创建一个video标签，当用用户将视频上传后，将上传的文件对象加到video的src属性上。当video标签开始加载视频帧时候，创建一个画布，设置画布的图像源为video在该帧的图像，然后将canvas图像转换为dataURI格式，最后将dataURI格式的图像设置为video的封面。