Skip to content
This repository has been archived by the owner on Sep 26, 2022. It is now read-only.

bond-london/gatsby-transformer-video

Repository files navigation

Merged with https://github.com/bond-london/bond-theme-development

Gatsby transformer video

This attempts to be to videos what gatsby-plugin-image is to images!

Or at least it's the start.

Basically it takes a video and converts to webm/mp4 formats, extracts the first frame as a poster and provides a component to view it.

Usage/installation

  1. Install
yarn add @bond-london/gatsby-transformer-video
  1. Configure gatsby-config

Add the following line into your gatsby-config

    "@bond-london/gatsby-transformer-video",
  1. Use it in queries
childGatsbyVideo {
        id
        duration
        hasAudio
        width
        height
        transformed(width: 1024, muted: true) {
          width
          height
          hasAudio
          duration
          mp4
          webm
          poster
        }
      }
  1. Use in the code
  const transformed = block.asset?.localFile?.childGatsbyVideo?.transformed;
  return (
      {transformed && (
        <GatsbyVideo
          className="w-full"
          videoData={transformed}
          autoPlay={true}
          loop={true}
        />
      )}
  );

And it starts working! If you have long videos it will take a long time to do the first conversion, but afterwards they are all cached.

Internals

Not much to say apart from the types of data

The transformed video is a GatsbyTransformedVideo which is:

  width: number;
  height: number;
  duration: string | number;
  hasAudio: boolean;
  mp4: string;
  webm: string;
  poster: string;

The arguments to the transformed are simply the width and whether or not to mute the video.

The original duration, width, height and hasAudio flags are set on the original video.

About

Gatsby plugin for videos like gatsby plugin image

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published