how to know and limit quatity for video

[thehien93]

Hi there.
I wanna limit quatiy of videos for users.
have read docs. but no nothing about settings.

my video become audio.
error message is

Request URL:
http://localhost:3000/images_demo/video-demo.mp4
Request Method:
GET
Status Code:
304 Not Modified
Remote Address:
[::1]:3000
Referrer Policy:
strict-origin-when-cross-origin

I don't no idea about problems.
help me, please.

it is my code.

 <Lightbox
                open={open}
                close={() => setOpen(false)}
                plugins={[Counter, Fullscreen, Slideshow, Thumbnails, Video]}
                counter={{ container: { style: { top: "unset", bottom: 0, left: "50%"} } }}
                fullscreen={{ ref: fullscreenRef }}
            
                slides={[
                {
                    type: "video",
                    width: 1280,
                    height: 720,
                    poster: "/images_demo/item-2.jpg",
                    playsInline: true,
                    controlsList: "nodownload",
                    preload: "metadata",
                    disableRemotePlayback: true,
                    controls: true,
                    sources: [
                      {
                        src: "/images_demo/video-demo.mp4",
                        type: "video/mp4",
                      },
                    ],
                  },
        `

[igordanchenko]

I'm not sure I understand the issue you are experiencing. Can you provide a minimal reproduction to illustrate the issue? You can use the following stackblitz as a template - https://stackblitz.com/edit/yet-another-react-lightbox-sandbox?file=src%2FApp.tsx

I wanna limit quatiy of videos for users.

Can you also elaborate on this?

[thehien93]

Thank you very much for your answer. I think in the case of users posting high-quality videos, the server's memory will be taken up too much. and the website will be slow.
therefore I want to limit the quality of the video.

it is my code
https://stackblitz.com/edit/yet-another-react-lightbox-sandbox-gweyte?file=src%2FApp.tsx

[igordanchenko]

Thank you for the clarification. Here is what you can do to address this in the current version of this library:

1. Determine the device viewport size:

const [media, setMedia] = React.useState<"mobile" | "tablet" | "desktop">("desktop");

React.useEffect(() => {
  const updateMedia = () => {
    if (window.innerWidth <= 480) setMedia("mobile");
    else if (window.innerWidth <= 768) setMedia("tablet");
    else setMedia("desktop");
  };

  updateMedia();

  window.addEventListener("resize", updateMedia);

  return () => {
    window.removeEventListener("resize", updateMedia);
  };
}, []);

2. Provide different video files depending on the viewport size:

slides={[
  {
    type: "video",
    sources: [
      {
        src:
          media === "mobile"
            ? "/video_480p.mp4"
            : media === "tablet"
              ? "/video_720p.mp4"
              : "/video_1080p.mp4",
        type: "video/mp4",
      },
      // ...
    ],
    // ...
  },
  // ...
]}

I'll also add support for the media attribute in the next version:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#using_the_media_attribute_with_video

[thehien93]

a great answer, I appreciate it. I'll use your way.

[igordanchenko]

Starting with v3.18.0, you can now use video source media attribute:

slides={[
  {
    type: "video",
    sources: [
      { src: "/video_480p.mp4", type: "video/mp4", media: "(max-width: 480px)" },
      { src: "/video_768p.mp4", type: "video/mp4", media: "(max-width: 768px)" },
      { src: "/video_1080p.mp4", type: "video/mp4" },
    ],
    // ...
  },
  // ...
]}

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#using_the_media_attribute_with_video