在創建畫布時在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); 
    } 
};