javascript - InvalidStateError in IE while creating canvas -
i trying create thumbnail image uploaded video user. working file in chrome , firefox, when execute same code in ie , throw me exception invalidstateerror.
i found same issue has been asked here, using pre loaded video. in case have upload video using file input.
this js code
var videosnapper = { captureascanvas: function(video, options, handle) { // create canvas , call handle function var callback = function() { // create canvas var canvas = $('<canvas />').attr({ width: options.width, height: options.height })[0]; // context , draw screen on canvas.getcontext('2d').drawimage(video, 0, 0, options.width, options.height); // seek video if have previous position if (prevpos) { // unbind seeked event - against loop $(video).unbind('seeked'); // seek video previous position video.currenttime = prevpos; } // call handle function (because of event) handle.call(this, canvas); } // if have time in options if (options.time && !isnan(parseint(options.time))) { // save previous (current) video position var prevpos = video.currenttime; // seek other time video.currenttime = options.time; // wait seeked event $(video).bind('seeked', callback); return; } // otherwise callback video context - compatibility calling in 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); }); }); })
for ie need add "loadedmetadata" event listener make sure video metadata loaded, can access currenttime property.
from answer: start html5 video @ particular position when loading? tried marking duplicate, didn't let me.
i think can make functionality work expected: https://jsfiddle.net/q9slwr73/5/
var videosnapper = { captureascanvas: function(video, options, handle) { var waitformetadata = function() { video.currenttime = options.time; }; // create canvas , call handle function var callback = function() { // create canvas var canvas = $('<canvas />').attr({ width: options.width, height: options.height })[0]; // context , draw screen on canvas.getcontext('2d').drawimage(video, 0, 0, options.width, options.height); // seek video if have previous position if (prevpos) { // unbind seeked event - against loop $(video).unbind('seeked'); video.removeeventlistener('loadedmetadata', waitformetadata, false); // seek video previous position video.currenttime = prevpos; } // call handle function (because of event) handle.call(this, canvas); } // if have time in options if (options.time && !isnan(parseint(options.time))) { // save previous (current) video position var prevpos = video.currenttime; // seek other time video.addeventlistener('loadedmetadata', waitformetadata, false); //old code: video.currenttime = options.time; // wait seeked event $(video).bind('seeked', callback); return; } // otherwise callback video context - compatibility calling in seeked event return callback.apply(video); } }; 
Comments
Post a Comment