キャンバスの作成中にIEのInvalidStateErrorが発生する

Question

アップロードした動画からサムネイル画像を作成しようとしています。 これはchromeとfirefoxの作業ファイルですが、IEで同じコードを実行すると例外がスローされますInvalidStateError。

私は同じ問題がhereと尋ねられましたが、すべてプレロードされたビデオを使用していました。 私の場合は、ファイル入力を使用してビデオをアップロードする必要があります。あなたはCURRENTTIMEにアクセスできるように、ビデオメタデータがロードされていることを確認するために、「loadedmetadata」イベントリスナーを追加する必要がIEの場合

この私の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

プロパティ。

回答：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); 
    } 
};