Почему это динамическое генерирование HTML5 видео не работает в IE11?

Question

У меня есть настройка функции Javascript для динамического создания миниатюр из заданного встроенного HTML5-видео после его загрузки.Это отлично работает в других браузерах.Проблема возникает с IE11.По какой-то причине он просто ничего не выводит, несмотря на то, что он отлично работает на Firefox и Chrome.

У меня есть раздел сайта, на котором есть несколько видео HTML5, и им нужно сгенерировать соответствующие миниатюры на основе первого кадра.Я провел много исследований и не могу найти никаких проблем совместимости IE11 с моим кодом.

Вот код, который у меня сейчас есть:

var vids = document.querySelectorAll('[id^=video-]');  

for(var i = 0; i < vids.length; i++){
   if(vids[i].tagName == 'VIDEO'){
      $("#video-" + (i+1)).on("loadeddata", generate_handler(i+1));
   }
   ...
}

generate_handler вызывает функцию shoot (пришлось сделать это из-за проблем с областью видимости в цикле),

function generate_handler(j) {
        return function(event) { 
            shoot(j);
        };
}

и функция shoot работает следующим образом:

function shoot(num){
    var video  = document.getElementById('video-' + num);
    var output = document.getElementById('videothumbnail-' + num);
    if(output.childNodes.length == 1){
        var canvas = capture(video);
        output.appendChild(canvas);
    }
}

и, наконец, функция capture выглядит следующим образом:

function capture(video) {
    var canvas = document.createElement('canvas');
    var w = 48;
    var h = 40;
    canvas.width  = w;
    canvas.height = h;
    canvas.style.marginTop = "4px";
    canvas.style.width = w + "px";
    canvas.style.height = h + "px";
    canvas.style.zIndex = "-999";
    var ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, w, h);
    return canvas;
} 

По существу, как TL; DR: при загрузке данных видео эта функция вызывается для съемки снимка экрана и добавленияэто к уменьшенному изображению div.Для этого он рисует видео на холсте.Это порядок вызова функций:

on('loadeddata', generate_handler()) -> shoot() -> capture()

Что странно, что после некоторых простых тестов с console.log, это на самом делеДостигнув внутренней части capture(), что склоняет меня к мысли, что это проблема совместимости с чем-то там, или с appendChild().

Что это должно сделать (и делает в Firefox / Chrome) - это нарисовать48x44px миниатюра видео HTML5, загружаемого на страницу.Вместо этого в IE11 ничего не отображается.