HTML5 Video Renders Not Working From Hosted mp4

[jsnow1390]

Description

When rendering html5 videos from lightGallery from something hosted the gallery for that item ends up being just a black screen for each item. Locally I've gotten one video to load but nothing in succession. Unsure if this problem is just for react or not.

Steps to reproduce

1. Create a LightGallery component
2. Add more then one mp4 video element to the gallery
3. Wait for the black screen while scrolling

JS code that you use to initialize lightGallery.

<LightGallery
                    mode={'lg-slide-circular'}
                    container={galleryContainer}
                    autoplay={false}
                    onInit={onInit}
                    plugins={[lgVideo, zoom]}
                    closable={false}
                    showMaximizeIcon={true}
                    slideDelay={400}
                    appendSubHtmlTo={'.lg-item'}
                    dynamic={true}
                    dynamicEl={content}
                    hash={false}
                    download={false}
                    elementClassNames={'inline-gallery-container'}
                    autoplayFirstVideo={false}
                >
                </LightGallery>

const content = [
        {
            video: {
                source: [{
                    src: 'https://www.lightgalleryjs.com/videos/video1.mp4',
                    type: 'video/mp4'
                }],
                attributes: {
                    preload: 'metadata',
                    controls: true,
                    playsInline: true,
                    muted: true,
                    defaultMuted: true,
                    disablePictureInPicture: true,
                    controlsList: 'nodownload'
                }
            }
        },
        {
            video: {
                source: [{
                    src: 'https://www.lightgalleryjs.com/videos/video1.mp4',
                    type: 'video/mp4'
                }],
                attributes: {
                    preload: 'metadata',
                    controls: true,
                    playsInline: true,
                    muted: true,
                    defaultMuted: true,
                    disablePictureInPicture: true,
                    controlsList: 'nodownload'
                }
            }
        },
        {
            video: {
                source: [{
                    src: 'https://www.lightgalleryjs.com/videos/video1.mp4',
                    type: 'video/mp4'
                }],
                attributes: {
                    preload: 'metadata',
                    controls: true,
                    playsInline: true,
                    muted: true,
                    defaultMuted: true,
                    disablePictureInPicture: true,
                    controlsList: 'nodownload'
                }
            }
        },
        {
            video: {
                source: [{
                    src: 'https://www.lightgalleryjs.com/videos/video1.mp4',
                    type: 'video/mp4'
                }],
                attributes: {
                    preload: 'metadata',
                    controls: true,
                    playsInline: true,
                    muted: true,
                    defaultMuted: true,
                    disablePictureInPicture: true,
                    controlsList: 'nodownload'
                }
            }
        }
];

Additional context

Locally I can get the first video to load but nothing else.
When dubugging the code I'm noticing things failing in getVideoHtml() where it is looking for
var videoInfo = this.core.galleryItems[index].__slideVideoInfo || {}; Only one of them listed above is getting that __slideVideoInfo added to it. The others seem to be undefined? Additionally the index always seems to be 0 which doesn't seem right

"lightgallery": "^2.7.2",

Screen.Recording.2024-07-16.at.21.05.00.mov

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jsnow1390]

I'll just reopen it if it goes stale. Maybe eventually it'll get looked at

[digitalaffinity-au]

I'm getting the same problem with mp4