时间戳

首页 > 解决方案 > 快照视频作为预览

javascript - 快照视频作为预览

问题描述

我从视频中获取快照以用作标题图像时遇到问题。下面我有我目前使用的代码，但我得到的输出只是一个黑色图像。在控制台中我没有遇到任何问题。在我将视频上传到我使用的文件服务器后，我会这样做。

    let video = $(videoPath).find('#newVideo').get(0);
    let canvas = document.createElement('canvas');
    video.onloadedmetadata = function() {
        video.play();
        canvas.width = 640;
        canvas.height = 480;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        var dataURI = canvas.toDataURL('image/jpeg');
        let $previewBox = $(".post-preview-box");
        let $previewCardImg = $previewBox.find(".card-img");

我用过如何拍摄基于 HTML5-JavaScript 的视频播放器的快照？作为获取快照的基础，然后添加一些其他的东西，希望它能起作用，但到目前为止我一直无法做到。

欢迎任何有关尝试的帮助或意见。

编辑 04-03-2020（4 月 3 日）：为了更清楚地说明，我将从 dataURI 中添加一个控制台并更改我所做的代码。

数据：图像/JPEG；base64，/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCACWASwDAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD8qqACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgA//2Q==//2Q==//2Q==//2Q==//2Q==oAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgD//2Q==oAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgD//2Q==

添加视频的 currentTime 并将其设置为 3（我也尝试过 5）。

    let video = $(videoPath).find('#newVideo').get(0);
    let canvas = document.createElement('canvas');
    video.onloadedmetadata = function() {
        video.currentTime = 3;
        video.play();
        var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        var dataURI = canvas.toDataURL('image/jpeg');
        let $previewBox = $(".post-preview-box");
        console.log(dataURI);
        let $previewCardImg = $previewBox.find(".card-img");

标签： javascriptjqueryajaxvideo

解决方案

在没有看到所有代码的情况下，这是一个获得 10 个屏幕的示例。

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>

有关更完整的示例，请参见：https ://codesandbox.io/s/clipseed-hfhee

推荐阅读