Gatsby: Add transformer for video files (gatsby-transformer-video)

[axe312ger]

Summary

I am working on gatsby-transformer-video to transform videos within Gatsby.

For now, its just a setFieldsOnGraphQLNodeType in my projects gatsby-node.js.

My main question:

Is @gatsbyjs/inkteam interested to have video transformation within the gatsby core repo?

The caching mechanism will be close to what gatsby-transformer-sqip does and I think in perspective of Gatsby v3, Gatsby Cloud etc. it might be valuable to have this in the Gatsby core.

If not, I am happy to release it as a separate project on GitHub & npm :)

So how does it work?

It will transform videos via ffmpeg from file-system + contentful into:

• thumbnails / posterimages (jpeg)
• animated thumbnails / previews (gif, webp, mp4)
• for

Additionally it will provide components to properly render the previews and videos.

Basic example

example query:

query MyQuery {
  allContentfulAsset {
    edges {
      node {
        id
        file {
          url
          contentType
        }
        video(width:1980) {
          h264,
          h265
        }
        videopreview(width: 600, fps: 4, duration: 3) {
          mp4
          webp
          gif
        }
      }
    }
  }
}

Rendering:

import React from 'react'

const PreviewImage = ({ videopreview }) => (
  <img src={videopreview.jpg} />
)

const AnimatedPreviewImage = ({ videopreview }) => (
  <picture>
    <source type="video/mp4" srcSet={videopreview.mp4} />
    <source type="image/webp" srcSet={videopreview.webp} />
    <img src={videopreview.gif} alt={description || title} />
  </picture>
)

const Video = ({ video, videopreview }) => (
  <Video playsinline preload="auto" controls poster={videopreview.jpg}>
    <source src={video.h265} type="video/mp4; codecs=hevc" />
    <source src={video.h264} type="video/mp4; codecs=avc1" />
  </Video>
)

Or go crazy by using the generated animated preview as posterimage:

import React from 'react'
import styled from 'styled-components'

const VideoWrapper = styled.div`
  position: relative;
  height: 100%;

  & video {
    position: relative;
    z-index: 2;
  }
`
const VideoAnimatedPosterImage = styled.picture`
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
`

const VideoWithAnimatedPosterImage = ({ video, videopreview }) => (
  <VideoWrapper>
    <VideoAnimatedPosterImage>
      <source type="video/mp4" srcSet={videopreview.mp4} />
      <source type="image/webp" srcSet={videopreview.webp} />
      <img src={videopreview.gif} alt={description || title} />
    </VideoAnimatedPosterImage>
    <Video
      playsinline
      preload="auto"
      controls
      poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    >
      <source src={video.h265} type="video/mp4; codecs=hevc" />
      <source src={video.h264} type="video/mp4; codecs=avc1" />
    </Video>
  </VideoWrapper>
)

Motivation

I want to host videos on my own, not using payed services or share them on youtube. Additionally this allows me to transform the video in any shape I like to.

Demotime

Example project production link: https://eineartjakob.de

here is some video of it in action: Kapture 2019-06-24 at 11.43.56.mp4.zip

Generated animated preview gif from the plugin: (fps are 50% of other previews on gifs due to massive file size of gifs)

Webp & mp4 variants are way smaller even with double fps

Anything else?

What else? Did I forget something? Any further thoughts?

[KyleAMathews]

This would definitely be something we're interested in! This will work super well with Gatsby Cloud as we'll be able to off-load processing of videos into cloud workers.

[KyleAMathews]

We're designing a proper Jobs API that this should hook into.

[axe312ger]

This would definitely be something we're interested in! This will work super well with Gatsby Cloud as we'll be able to off-load processing of videos into cloud workers.

Yes, exactly the issue I am slowly getting with my project. Since we now have more than 10 videos, converting all of these in h264, h265 + previews in 3 formats, clearing the cache on netlify would result in a broken build 😢

We're designing a proper Jobs API that this should hook into.

Omg that be amazing!

[axe312ger]

So I talked to @KyleAMathews how we can progress here, this is the outcome of our discussion:

• I'll extract my code from the customer project and create gatsby-transformer-video within the gatsby-core repo (asap)
• We get it reviewed by awesome people like u (I am really not a FFMPEG professional, some should review my StackOverflow copy pasta 😅)
• It will be a v0 till the new Jobs API is ready some day in Gatsby v2

I guess I'll close the issue as soon the PR is ready for review :)

Ps.:

The project I'll extract the code from is now live.
If you are curious how the outcome of the new transformer could look and feel:

https://eineartjakob.de

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[axe312ger]

Closing here, lets continue discussion in the pull request #15783