Измените <img>на <video>, если тип файла видео - PullRequest
Новая
       23

Измените <img>на <video>, если тип файла видео

0 голосов
/ 02 января 2019

У меня есть функция, которая создает миниатюры, и когда файлы имеют формат jpg, png и т. Д., Они должны идти внутри элемента, а всякий раз, когда файл является .mp4, он должен идти внутри элемента.

Изображения и видеофайлыприходят из JSON-фида, вызываемого с помощью AJAX, и .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");
    }
...