打开视频缩略图 - 视频将打开但不会加载

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>