当文件为视频文件类型时，将<img/>更改为<video>

Question

我有一个创建缩略图的功能，当文件是jpg，png等时，它们应该进入一个元素内，而每当文件是.mp4时，它就应该进入一个元素内。

图像和视频文件来自一个用AJAX调用的JSON提要，.mp4总是像图像文件一样位于img元素内，这意味着它具有无限加载的gif且不显示任何内容。

接下来我要尝试创建一个条件来检查文件扩展名并输出相应的元素，但是我要重复进行所有操作。

这是我目前的HTML格式：

<ul style="width: 1415%; position: relative;">
    <li class="active" style="float: left; list-style: none; position: relative; width: 133px;">
        <img data-large="/Files/Images/Hewitt/Products/32589-445-_-2.jpg?format=jpg&amp;width=600&amp;height=600" data-image="/Files/Images/Hewitt/Products/32589-445-_-2.jpg?format=jpg&amp;width=600&amp;height=350" class="img-responsive " src="/Files/Images/Hewitt/Products/32589-445-_-2.jpg?format=jpg&amp;height=105"> 
</li>
<li style="float: left; list-style: none; position: relative; width: 133px;">
    <video data-video="/Files/Images/Hewitt/Products/32589-445-_-2.jpg" width="100%" src="/Files/Images/Hewitt/Products/32589-445-_-2.jpg">
    </video>
</li>
<li style="float: left; list-style: none; position: relative; width: 133px;">
    <img data-large="/Files/Images/Hewitt/Products/32589-445-_-3.jpg?format=jpg&amp;width=600&amp;height=600" data-image="/Files/Images/Hewitt/Products/32589-445-_-3.jpg?format=jpg&amp;width=600&amp;height=350" class="img-responsive " src="/Files/Images/Hewitt/Products/32589-445-_-3.jpg?format=jpg&amp;height=105"></li>
<li style="float: left; list-style: none; position: relative; width: 133px;">
    <video data-video="/Files/Images/Hewitt/Products/32589-445-_-3.jpg" width="100%" src="/Files/Images/Hewitt/Products/32589-445-_-3.jpg">
    </video>
</li> 
<li style="float: left; list-style: none; position: relative; width: 133px;">
    <img data-large="/Files/Images/Hewitt/Products/32589-445-_-4.jpg?format=jpg&amp;width=600&amp;height=600" data-image="/Files/Images/Hewitt/Products/32589-445-_-4.jpg?format=jpg&amp;width=600&amp;height=350" class="img-responsive " src="/Files/Images/Hewitt/Products/32589-445-_-4.jpg?format=jpg&amp;height=105"></li>
<li style="float: left; list-style: none; position: relative; width: 133px;">
    <video data-video="/Files/Images/Hewitt/Products/32589-445-_-4.jpg" width="100%" src="/Files/Images/Hewitt/Products/32589-445-_-4.jpg">
    </video>
</li> 
<li style="float: left; list-style: none; position: relative; width: 133px;">
    <img data-large="/Files/Images/Hewitt/Products/32589-445-_-5.jpg?format=jpg&amp;width=600&amp;height=600" data-image="/Files/Images/Hewitt/Products/32589-445-_-5.jpg?format=jpg&amp;width=600&amp;height=350" class="img-responsive " src="/Files/Images/Hewitt/Products/32589-445-_-5.jpg?format=jpg&amp;height=105"></li>
<li style="float: left; list-style: none; position: relative; width: 133px;"> 
    <video data-video="/Files/Images/Hewitt/Products/32589-445-_-5.jpg" width="100%" src="/Files/Images/Hewitt/Products/32589-445-_-5.jpg">
    </video>
</li> 
<li style="float: left; list-style: none; position: relative; width: 133px;">
    <img data-large="/Files/Images/Hewitt/Products/32589-445-_-6.jpg?format=jpg&amp;width=600&amp;height=600" data-image="/Files/Images/Hewitt/Products/32589-445-_-6.jpg?format=jpg&amp;width=600&amp;height=350" class="img-responsive " src="/Files/Images/Hewitt/Products/32589-445-_-6.jpg?format=jpg&amp;height=105"></li>
<li style="float: left; list-style: none; position: relative; width: 133px;">
    <video data-video="/Files/Images/Hewitt/Products/32589-445-_-6.jpg" width="100%" src="/Files/Images/Hewitt/Products/32589-445-_-6.jpg"> 
    </video>
</li> 
<li style="float: left; list-style: none; position: relative; width: 133px;">
    <img data-large="/Files/Images/Hewitt/Products/32589-445-_-7.mp4?format=jpg&amp;width=600&amp;height=600" data-image="/Files/Images/Hewitt/Products/32589-445-_-7.mp4?format=jpg&amp;width=600&amp;height=350" class="img-responsive " src="/Files/Images/Hewitt/Products/32589-445-_-7.mp4?format=jpg&amp;height=105"></li>
<li style="float: left; list-style: none; position: relative; width: 133px;">
    <video data-video="/Files/Images/Hewitt/Products/32589-445-_-7.mp4" width="100%" src="/Files/Images/Hewitt/Products/32589-445-_-7.mp4">
    </video>
</li>
</ul>

还有我的jQuery函数：

fcn_createThumbnails = function (images) {
        // Create variant thumbnails
        var imagesList = images != "" ? images.split(",") : [obj_globalOptions.obj_urlPaths.str_theme+"/images/alternativeImage.jpg"],
            listHtml = "<ul>",
            liHtml = '<li>'+
                '<img data-large="{{image}}?format=jpg&amp;width=600&amp;height=600" data-image="{{image}}?format=jpg&amp;width=600&amp;height=350" class="img-responsive " src="{{image}}?format=jpg&amp;height=105">' +
                '</li>',
            liVideoHtml = '<li>'+
                '<video data-video="{{image}}" width="100%" src="{{image}}">' + 
                    '</li>';
        var imgExt = ".jpg";
        var imgFile = imgExt.split(".").pop();
        var fileExt = ".mp4";
        var videoFile = fileExt.split(".").pop();

        for(var img=0; img < imagesList.length; img++){
                if(imgFile) {
                    listHtml += liHtml.replace(/{{image}}/g, imagesList[img]);
                }
                if(videoFile) {
                    listHtml += liVideoHtml.replace(/{{image}}/g, imagesList[img]);
                }
        }
        $("#imgThumbs").html(listHtml + "</ul>");

        $('#product-lg-image img').attr('src', $('#imgThumbs ul li:first').find('img').attr('data-image'));
        $('#imgThumbs ul li:first').addClass("active");
    }