打開視頻縮略圖 - 視頻將打開但不會加載

Question

對於上下文，這只是一個顯示鏈接到較大照片/視頻的縮略圖庫的網站。

當打開照片的縮略圖時沒有問題。 只有在單擊視頻縮略圖並且視頻不會加載之前，帶有視頻的縮略圖看起來與照片縮略圖相同。 參考下面的 HTML(first block) & javascript(second block) 代碼，任何幫助將不勝感激，這是我自己的個人項目，我已經被困了幾天大聲笑。 如果需要任何其他信息，請隨時詢問

單擊帶有視頻的縮略圖但視頻不播放時會發生這種情況:(

<!-- code below is the PHOTO block of code ! -->

<article class="thumb">
    <a href="images/fulls/21.jpg" class="image">
    <img src="images/thumbs/21.jpg" class="image" alt="" /></a>
    <h2> Cmon mayne</h2>
    <p>Photoshoot with Myles Jay </p>
</article>

<!-- code below is the VIDEO block of code ! -->

<article class="thumb">                         
    <a href="images/fulls/16.mp4"  type="video/mp4" video     
         src="images/fulls/16.mp4" class="image">
    <img src="images/thumbs/ab22.jpg" class="image" alt="" />   
    </a>                                                                                <h2> Getting to the work</h2>                                
<p>Photoshoot with Myself </p>
</article>

// Main.
        var $main = $('#main');

    // Thumbs.

    $main.children('.thumb').each(function() {

    var $this = $(this),
            $image = $this.find('.image'), $image_img = $image.children('img'),
                    
        x;

    // No image? Bail.
        if ($image.length == 0)
            return;

    // Image.
    // This sets the background of the "image" <span> to the image pointed to by its child
    // <img> (which is then hidden). Gives us way more flexibility.

    // Set background.
            $image.css('background-image', 'url(' + $image_img.attr('src') + ')');

    // Set background position.
            if (x = $image_img.data('position'))
                $image.css('background-position', x);
       // Hide original img.
            $image_img.hide();    });

        // Poptrox.
            $main.poptrox({
                baseZIndex: 20000,
                caption: function($a) {

                    var s = '';

                    $a.nextAll().each(function() {
                        s += this.outerHTML;
                    });

                    return s;

                },
                fadeSpeed: 300,
                onPopupClose: function() { $body.removeClass('modal-active'); },
                onPopupOpen: function() { $body.addClass('modal-active'); },
                overlayOpacity: 0,
                popupCloserText: '',
                popupHeight: 150,
                popupLoaderText: '',
                popupSpeed: 300,
                popupWidth: 150,
                selector: '.thumb > a.image',
                usePopupCaption: true,
                usePopupCloser: true,
                usePopupDefaultStyling: false,
                usePopupForceClose: true,
                usePopupLoader: true,
                usePopupNav: true,
                windowMargin: 50
            });

            // Hack: Set margins to 0 when 'xsmall' activates.
                breakpoints.on('<=xsmall', function() {
                    $main[0]._poptrox.windowMargin = 0;
                });

                breakpoints.on('>xsmall', function() {
                    $main[0]._poptrox.windowMargin = 50;
                });

})(jQuery);

我搜索了每個提到縮略圖和視頻的 stackoverflow 方法，老實說我被卡住了。 我一直在玩弄標簽和屬性，但我似乎無處可去。

Answer 1

嘗試將您的<article>設置為：

<article class="thumb">                         
    <a href="images/fulls/16.mp4">
    <img src="images/thumbs/ab22.jpg" class="image" alt="" />   
    </a>                                                                               <h2> Getting to the work</h2>                                
<p>Photoshoot with Myself </p>
</article>