快照视频作为预览

var screens = [];

var video = document.getElementById('video');
var video_preview = document.getElementById('video_preview');

var loadingContainer = document.getElementById('loading-container')

function loadVideo(event) {
  loadingContainer.style.display = 'block'
  screens = [];

  var reader = new FileReader()
  reader.onload = function(e) {
    video.src = video_preview.src = e.target.result;
    video.autoplay = video_preview.autoplay = true;
    video.hasLoaded = video_preview.hasLoaded = false;

    video_preview.addEventListener('canplay', function() {
      video_preview.hasLoaded = true;
      video.play();
    })

    video.addEventListener('canplay', function() {

      // first time
      if (!video.hasLoaded) {
        console.log('Loaded: video duration: ', this.duration, event.target.files[0].size)

        loadingContainer.innerText = 'Generating screens...'

        video.hasLoaded = true;

        var self = this;

        (function repeat(i) {
          setTimeout(function() {
            var timestamp = ((self.duration / 10) * i) / 1.1; // fudge abit so dont get start/end frames

            console.log('seeking to:', timestamp)
            self.currentTime = timestamp

            if (--i) {
              // next
              repeat(i);
            } else {
              //
              loadingContainer.style.display = 'none'

              // all screens grabbed
              var str = '<div style="position:relative;width:calc(100% + .25rem)">'
              screens.reverse().forEach(function(screen) {
                str += '<img src="' + screen + '" style="width:32%" class="img-thumbnail m-1" />';
              });
              str += '</div>';
              document.getElementById("screens-container").innerHTML = str;
            }
          }, 500) // how fast to attempt to grab screens
        })(11); // iterations i.e how many screens
      }
    }, false);

    video.addEventListener('seeked', function() {
      console.log('grabbing screen for', this.currentTime)
      takeScreen();
    }, false);
  }

  reader.readAsDataURL(event.target.files[0]);
}

function takeScreen() {
  var filename = video.src;
  var w = video.videoWidth;
  var h = video.videoHeight;
  var canvas = document.createElement('canvas');
  canvas.width = w;
  canvas.height = h;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, w, h);
  var data = canvas.toDataURL("image/jpg");

  screens.push(data)

  loadingContainer.innerText = 'Generated ' + screens.length + ' out of 10 screens...'
}

function failed(e) {
  switch (e.target.error.code) {
    case e.target.error.MEDIA_ERR_ABORTED:
      console.log('You aborted the video playback.');
      break;
    case e.target.error.MEDIA_ERR_NETWORK:
      console.log('A network error caused the video download to fail part-way.');
      break;
    case e.target.error.MEDIA_ERR_DECODE:
      console.log('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
      break;
    case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
      console.log('The video could not be loaded, either because the server or network failed or because the format is not supported.');
      break;
    default:
      console.log('An unknown error occurred.');
      break;
  }
}

body,
html {
  margin: 0;
  padding: 0
}

li {
  display: inline-block;
  list-style-type: none
}

.jumbotron {
  margin-bottom: 1rem;
}

<div class="container">

  <div class="card">
    <div class="card-header" style="background-color: #e9ecef">
      <h5 class="card-title">Video Preview</h5>
      <video id="video_preview" onerror="failed(event)" controls="controls" preload="none" muted style="width: 100%"></video>
      <video id="video" onerror="failed(event)" controls="controls" preload="none" muted style="display:none"></video>
      <div class="card-body">
        <a href="javascript:void(0)" class="btn btn-sm btn-primary btn-block" onClick="$('[type=\'file\']').trigger('click')">
          <i class="fa fa-upload"></i> Load Video
        </a>
        <form id="uploadForm" ref="uploadForm" action='/upload' method='post' enctype="multipart/form-data">
          <input type="file" name="file" accept="video/*" style="display: none" onchange="loadVideo(event)">
        </form>
        <div id="loading-container" style="display:none">Loading...</div>
      </div>

      <div class="card-body">
        <h5 class="card-title">Screens</h5>
        <div id="screens-container"></div>
      </div>
    </div>
  </div>

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>