Issues getting video to play with mixed gallery

[jasonwilliamsau]

I have a gallery containing images and videos. The lightbox works, opens the correct images, thumbnails, etc EXCEPT videos aren't playing.

My markup for the video tile is:

<div class="col masonry-item media-item" id="media_610" data-mediaid="610">
                <div class="card">
                    <img src="/g/1/32/t/20240416123331-661dea83689f3-1920-1080-thumb.webp" class="card-img-top" alt="">
                    <a 
                        href="/g/1/32/20240416123331-661dea83689f3-1920-1080.mp4" 
                        class="card-img-overlay transparent text-light lightgallery-item" 
                        data-external-thumb-image="/g/1/32/t/20240416123331-661dea83689f3-1920-1080-thumb.webp"
                        data-video='{"source": [{"src":"/g/1/32/20240416123331-661dea83689f3-1920-1080.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}}'
                        data-poster="/g/1/32/t/20240416123331-661dea83689f3-1920-1080-thumb.webp"
                        >
                        <p class="card-title d-flex justify-content-end">
                            <span class="fa-light fa-video"></span>
                        </p>
                        <div class="video-overlay"><span class="video-icon fa-thin fa-circle-play"></span></div>                    </a>
                    <div class="card-body d-flex">
                        
                            <a href="/g/1/32/20240416123331-661dea83689f3-1920-1080.mp4" class="action-link icon-link favourite-media" data-mediaid="610">
                                <span class="action-icon fa-light fa-xl fa-heart"></span>
                                <span class="action-label">Favourite</span>
                            </a>
                   
                            <a href="/g/1/32/20240416123331-661dea83689f3-1920-1080.mp4" class="action-link icon-link select-media" data-mediaid="610">
                                <span class="action-icon fa-light fa-xl fa-square"></span>
                                <span class="action-label">Select</span>
                            </a>
                            
                            <a href="#" class="action-link icon-link media-settings ms-auto" data-bs-toggle="modal" data-bs-target="#media_settings">
                                <span class="action-icon fa-light fa-xl fa-gear"></span>
                                <span class="action-label">Settings</span>
                            </a>

                    </div>
                </div>
            </div>

and my JS is

    <script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>

    <script src="https://unpkg.com/[email protected]/lightgallery.min.js"></script>
    <!-- lightgallery plugins -->
    <script src="https://unpkg.com/[email protected]/plugins/thumbnail/lg-thumbnail.min.js"></script>
    <script src="https://unpkg.com/[email protected]/plugins/zoom/lg-zoom.min.js"></script>
    <script src="https://unpkg.com/[email protected]/plugins/video/lg-video.min.js"></script>
    <script src="https://unpkg.com/[email protected]/plugins/fullscreen/lg-fullscreen.min.js"></script>

    <script type="text/javascript">
    lightGallery(document.getElementById('lightgallery'), {
        selector: '.lightgallery-item',
        exThumbImage: 'data-external-thumb-image',
        plugins: [lgZoom, lgThumbnail, lgFullscreen, lgVideo],
        speed: 500,
        download: false,
        videojs: true
    });
    </script>

When I click on the thumbnail, it opens the lightbox and shows the video thumbnail with the play icon spinning over it but it does not load the video.

Any thoughts?

[Diffus3d]

I have the same problem, did you ever solve this?

[jasonwilliamsau]

I made a few changes and modified my code a little as I needed to implement lazyloading and removed the masonry layout.

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3" id="lightgallery">
....

<div class="col media-item" id="media_610" data-mediaid="610">
                <div class="card">
                    <img data-src="/g/1/32/t/20240416123331-661dea83689f3-1920-1080-thumb.webp" src="/images/placeholder.png" class="lazy card-img-top" alt="">
                    <a 
                        href="/g/1/32/20240416123331-661dea83689f3-1920-1080.mp4" 
                        class="card-img-overlay transparent text-light lightbox-trigger lightgallery-item" 
                        data-gallery="gallery"
                        data-external-thumb-image="/g/1/32/t/20240416123331-661dea83689f3-1920-1080-thumb.webp"
                        data-video='{"source": [{"src":"/g/1/32/20240416123331-661dea83689f3-1920-1080.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}}'
                        data-poster="/g/1/32/t/20240416123331-661dea83689f3-1920-1080-thumb.webp"
                        >
                        <p class="card-title d-flex justify-content-end">
                            <span class="fa-light fa-video"></span>
                        </p>
                        <div class="video-overlay"><span class="video-icon fa-thin fa-circle-play"></span></div>                    </a>
                    <div class="card-body d-flex">
                        ...
                    </div>
                </div>
            </div>
....
</div>
                ```

<script>
document.addEventListener("DOMContentLoaded", function() {
    var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
    var allImagesLoaded = false;

    // Lazy loading images using IntersectionObserver
    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;  // Load the actual image
                    lazyImage.classList.remove("lazy");
                    lazyImageObserver.unobserve(lazyImage);

                    // Check if all images have been loaded
                    if ([...document.querySelectorAll('img.lazy')].length === 0) {
                        allImagesLoaded = true;  // Mark all images as loaded
                        reinitializeLightGallery();  // Reinitialize LightGallery to use the real images
                    }
                }
            });
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    }

    // Function to reinitialize LightGallery after lazy images have loaded
    function reinitializeLightGallery() {
        lightGallery(document.getElementById('lightgallery'), {
            selector: '.lightgallery-item',  // Target all items with the class `lightgallery-item`
            licenseKey: '0000-0000-000-0000',
            plugins: [lgVideo, lgZoom, lgFullscreen],
            speed: 500,
            download: false,
            mobileSettings: { controls: false, showCloseIcon: true, download: false }
        });
    }

    // Initialize LightGallery for already loaded images (or if no lazy loading is used)
    reinitializeLightGallery();  // Initial load for non-lazy images
});

</script>

[Diffus3d]

Thanks for that. What tripped me up was specific usage in lightgallery for videojs, specifically not using src but using video. This ended up being the fix for me.

dynamicEl: [
{
video: {"source": [{"src":"URL/playlist.m3u8", "type":"application/x-mpegURL"}],
},
thumb:
"URL&auto=format&fit=crop&w=240&q=80",
subHtml: (etc)