VideoJS bundle size is huge

[nosisky]

Description

I am building a javascript widget that makes use of VideoJS to play videos, after bundling the file, I noticed that VideoJS contributed to more than half of the entire project size. Is there a way to import a simple version of VideoJS that only support HLS, DASH and MP4 players without any need for UI controls or other plugins/modules not needed to play HLS, DASH and MP4?

Reduced test case

No response

Steps to reproduce

1. Set up a react project and import VideoJS
2. Generate a production build
3. Observe the size of the generated bundle

Errors

No response

What version of Video.js are you using?

7.20.1

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

All browsers

What OS(es) and version(s) does this occur with?

All OS

[gkatsev]

Unfortunately, there isn't currently a way to only include the playback engine without the rest of Video.js. We've taken a look at reducing player size before, and there's not much that can be removed. Video.js 8 will be releasing soon and with it, it's dropping support for legacy browsers, which helps us remove no-longer used code which is reducing the bundle size a bit.

Ideally, you should lazy load your player component with Video.js and not have it be part of the initial bundle that's loaded on the site.

[nosisky]

Thanks @gkatsev , do you mean I should use the video.js CDN to load videojs instead of installing and using the npm package within my project?

[gkatsev]

Not necessarily. You can use build tools to split your bundles and what not. For example, using dynamic import().

[wingsbob]

I believe Payments.tsx has an example of lazy loading for adyen

[jason-liu22]

Not necessarily. You can use build tools to split your bundles and what not. For example, using dynamic import(). @gkatsev I used dynamic import, and my code is following

export default function VideoJSPlayer({
  options,
  onReady,
}: {
  options: any;
  onReady: (player: Player) => void;
}) {
  console.log("Options: ", options);
  const videoRef = useRef<HTMLDivElement | null>(null);
  const playerRef = useRef<Player | null>(null);

  useEffect(() => {
    (async function handleVideojs() {
      // Make sure Video.js player is only initialized once
      if (!playerRef.current) {
        // The Video.js player needs to be _inside_ the component el for React 18 Strict Mode.
        const videoElement = document.createElement("video-js");
        // videoElement.classList.add("vjs-big-play-centered", "vjs-16-9");

        videoRef.current?.appendChild(videoElement);
        // const player = (playerRef.current = videojs(
        //   videoElement,
        //   options,
        //   () => {
        //     onReady && onReady(player);
        //   }
        // ));

        import("video.js").then(async ({ default: videojs }) => {
          await import("video.js/dist/video-js.css");
          if (options["techOrder"] && options["techOrder"].includes("youtube")) {
            // eslint-disable-next-line
            await import("videojs-youtube");
          }
          const player = (playerRef.current = videojs(
            videoElement,
            options,
            () => {
              onReady && onReady(player);
            }
          ));
        });

        // You could update an existing player in the `else` block here
        // on prop change, for example:
      } else {
        const player = playerRef.current;
        // player.autoplay(options.autoplay);
        player.width(options.width);
        player.height(options.height);
      }
    })();
  }, [options, videoRef]);

it works but there are some weired issues(style and two node mounted) for that case.

https://user-images.githubusercontent.com/61251512/236862439-050b83f9-1080-4d36-ba72-63d6c54804bf.mp4

here is a clone of it. https://stackblitz.com/edit/react-ts-ttmh2w?file=App.tsx What am I wrong?

[video-archivist-bot]

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

• for https://user-images.githubusercontent.com/61251512/236862439-050b83f9-1080-4d36-ba72-63d6c54804bf.mp4: say @video-archivist-bot save NjLmzw