在创建画布时在IE中InvalidStateError

Question

我想从用户上传的视频创建缩略图。 它是在铬和Firefox的工作文件，但是当我在IE中执行相同的代码，它扔我异常InvalidStateError。

我发现相同的问题已被要求here，但都使用预装视频。 但在我的情况下，我必须使用文件输入上传视频。

这是我的JS代码

var VideoSnapper = { 

    captureAsCanvas: function(video, options, handle) { 

     // Create canvas and call handle function 
     var callback = function() { 
      // Create canvas 
      var canvas = $('<canvas />').attr({ 
       width: options.width, 
       height: options.height 
      })[0]; 
      // Get context and draw screen on it 
      canvas.getContext('2d').drawImage(video, 0, 0, options.width, options.height); 
      // Seek video back if we have previous position 
      if (prevPos) { 
       // Unbind seeked event - against loop 
       $(video).unbind('seeked'); 
       // Seek video to previous position 
       video.currentTime = prevPos; 
      } 
      // Call handle function (because of event) 
      handle.call(this, canvas); 
     } 

     // If we have time in options 
     if (options.time && !isNaN(parseInt(options.time))) { 
      // Save previous (current) video position 
      var prevPos = video.currentTime; 
      // Seek to any other time 
      video.currentTime = options.time; 
      // Wait for seeked event 
      $(video).bind('seeked', callback); 
      return; 
     } 

     // Otherwise callback with video context - just for compatibility with calling in the seeked event 
     return callback.apply(video); 
    } 
}; 


$(document).ready(function() { 
    $('#newlocalFILE').on('change', function() { 
     var player = document.getElementById("videoPlayer"); 
     var currentVID = document.getElementById('currentVID'); 
     var selectedLocalVID = document.getElementById('newlocalFILE').files[0]; 


     currentVID.setAttribute('src', URL.createObjectURL(selectedLocalVID)); 
     player.load(); 
     player.play(); 

     var canvases = $('canvas'); 
     VideoSnapper.captureAsCanvas(document.getElementById("videoPlayer"), { 
      width: 160, 
      height: 68, 
      time: 40 
     }, function(canvas) { 
      var dataUrl = canvas.toDataURL(); 
      $('#tst').attr("src", dataUrl); 
      //$('#screen').append(canvas); 

     }); 
    }); 
}) 

JSFiddle

Answer 1

对于IE浏览器，你需要添加“等待loadedmetadata”事件侦听器，以确保视频元数据被加载，这样你就可以访问currentTime的属性。

从这个答案：Start HTML5 video at a particular position when loading?我试图标记为重复，但它没有让我。

我认为这可以帮助你做出的功能按预期方式工作：https://jsfiddle.net/q9sLwr73/5/

var VideoSnapper = { 
    captureAsCanvas: function(video, options, handle) { 
     var waitForMetadata = function() { 
      video.currentTime = options.time; 
     }; 

     // Create canvas and call handle function 
     var callback = function() { 

      // Create canvas 
      var canvas = $('<canvas />').attr({ 
       width: options.width, 
       height: options.height 
      })[0]; 

      // Get context and draw screen on it 
      canvas.getContext('2d').drawImage(video, 0, 0, options.width, options.height); 
      // Seek video back if we have previous position 
      if (prevPos) { 
       // Unbind seeked event - against loop 
       $(video).unbind('seeked'); 
       video.removeEventListener('loadedmetadata', waitForMetadata, false); 
       // Seek video to previous position 
       video.currentTime = prevPos; 
      } 
      // Call handle function (because of event) 
      handle.call(this, canvas); 
     } 

     // If we have time in options 
     if (options.time && !isNaN(parseInt(options.time))) { 
      // Save previous (current) video position 
      var prevPos = video.currentTime; 

      // Seek to any other time 
      video.addEventListener('loadedmetadata', waitForMetadata, false); 
      //OLD CODE: video.currentTime = options.time; 

      // Wait for seeked event 
      $(video).bind('seeked', callback); 
      return; 
     } 

     // Otherwise callback with video context - just for compatibility with calling in the seeked event 
     return callback.apply(video); 
    } 
};