@bond-london/gatsby-transformer-video
v3.12.0
Published
Transform video files
Downloads
20
Readme
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
- Install
yarn add @bond-london/gatsby-transformer-video
- Configure gatsby-config
Add the following line into your gatsby-config
"@bond-london/gatsby-transformer-video",
- Use it in queries
childGatsbyVideo {
id
duration
hasAudio
width
height
transformed(width: 1024, muted: true) {
width
height
hasAudio
duration
mp4
webm
poster
}
}
- 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 IGatsbyTransformedVideo
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.