(JS) Загрузить .gif и .gifv в элемент изображения?

Question

Итак, я делаю расширение (для личного использования), которое позволяет мне прокручивать компактный режим Reddit с помощью клавиш со стрелками, и все изображения предварительно просматриваются в элементе, созданном расширением.У меня проблема с воспроизведением .gif и .gifv в элементе изображения, создаваемом расширением.Разве GIF не должен загружаться непосредственно в элементы изображения?Не уверен насчет Гифва.Я мог бы позволить расширению проверить конец источника на наличие «.gif» и «.gifv», а затем создать элемент видео, а не элемент изображения, но это ли необходимо?

Возможно, есть что-то, что янужно добавить?Вот полный код, который я использую для добавления элемента изображения:

function createElement(source) {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var bottomPlacement = h - 58;
bottomPlacement = bottomPlacement * -1;
w = w / 2;
h = h - 102;

var new_el
if (source.includes(".gif")) {
    new_el = document.createElement('video');
    new_el.preload = "auto";
    new_el.autoplay = true;
    new_el.style.width = w + 'px';
} else {
    new_el = document.createElement('img');
}
new_el.setAttribute('src', source);
new_el.setAttribute('id', 'extensionOverlay');
new_el.style.height = h + 'px';
new_el.style.position = 'absolute';
new_el.style.float = 'right';
new_el.style.right = '24px';
new_el.style.zindex = 99;
new_el.style.bottom = bottomPlacement + 'px';
new_el.style.border = "medium solid #0099cc"
var plass = document.getElementsByTagName('header')[0];
plass.insertBefore(new_el, plass.children[1]);
document.getElementById('extensionOverlay').addEventListener('load', function() {
    var imageH = document.getElementById('extensionOverlay').naturalHeight;
    var imageW = document.getElementById('extensionOverlay').naturalWidth;
    var percentAltered = h / imageH;
    var widthOfImage = imageW * percentAltered;
    if (imageW < 200 && imageH < 200) {
        new_el.style.width = ""; new_el.style.height = "300px";
    } else if (widthOfImage > w) {
        new_el.style.height = "";
        new_el.style.width = w + 'px';
    } 
});
}

Решение найдено.Просто измените .gifv на .gif и добавьте в качестве изображения ...:

var new_el
if (source.includes(".gifv")) {
    source = source.replace(".gifv", ".gif");
}
new_el = document.createElement('img');
new_el.setAttribute('src', source);
new_el.setAttribute('id', 'extensionOverlay');
new_el.style.height = h + 'px';
new_el.style.position = 'absolute';
new_el.style.float = 'right';