HTML5 videos not loading

[paule89123]

Description

Describe the issue that you're seeing. When I click on a video poster to open the lightgallery, the first video loads, but the other videos in the gallery don't load.

JS code that you use to initialize lightGallery.

const onInit = () => {
    if (!document) return;
  };

Sample HTML markup

<LightGallery
        onInit={onInit}
        speed={0}
        plugins={[lgThumbnail, lgVideo, lgZoom]}
        mode="lg-fade"
        onHasVideo={(detail) => {
          console.log("detail", detail);
        }}
      >
        {(videos || []).map((video) => {
          return (
            <div
              key={video._id}
              className="aspect-[3/4] col-span-1 gallery-item relative w-full cursor-pointer"
              data-video={`{"source": [{"src": "${video.fileUrl}", "type":"video/mp4"}], "attributes": {"preload": false, "playsinline": true, "controls": true}}`}
              data-poster="../../public/images/rocket.jpeg"
            >
              <Image
                src={WhatsappIcon}
                layout="fill"
                objectFit="cover"
                quality={100}
                priority
                className=""
              />
            </div>
          );
        })}
      </LightGallery>

Environment

• Browser and version - tested in Brave, Chrome, Safari (all latest versions)
• OS - macOS Monterey
• lightGallery version - 2.4.0
• Framework - Next js, 12.0.7

Additional context

onHasVideo shows that detail.src is undefined. I don't know if this is an issue or not, as detail.html5Video.source is the correct video source.

[sachinchoolur]

Hey @paule89123,

Is it possible to share the website URL? Or at least a screenshot of the generated HTML markup

[paule89123]

I created this example:

https://stackblitz.com/edit/nextjs-ixewis?file=pages%2Findex.js,styles%2Fglobals.css,package.json,pages%2F_app.js

It's not a perfect replication of my code as I don't have a stackblitz pro account so I've just linked to a public video instead of uploading one, but it still demonstates the issue I'm having.

If you click on one of the thumbnails, the video will load when you press play, but then if you press left or right to go to the next video, it says "failed to load content".

[sachinchoolur]

The poster image URL was not correct. Please remove the data-poster attribute or add a real image.

Here is the working demo - https://stackblitz.com/edit/nextjs-rmzi5y?file=pages%2Findex.js,styles%2Fglobals.css,package.json,pages%2F_app.js

If the issue persists, please let me know

[stale[bot]]

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.