[docs] document component for HTML5 videos

[kripod]

Similar to gatsby-image, I think a separate package (gatsby-video) should be made for HTML5 videos, as they have several quirks to get over with, including:

• Using an aspect ratio box as a container for video elements to limit the amount of browser re-rendering tasks
• Setting a poster (thumbnail) for videos while letting them be preloaded
  • Using the poster attribute on its own is not enough, because if a video gets preloaded, then the poster gets substituted by a still clip from the video
  • Thumbnails should be available in multiple (responsive) sizes, which is not yet possible with the poster attribute

I would like to propose some ideas for components to be used in gatsby-video:

• Video
• AspectRatioBox

Using the Video components should be as easy as using gatsby-image.

[calcsam]

Hmm. The reason why gatsby-image benefits from gatsby is that preloading a blurry image, creating multiple image sizes, etc needs an image processing pipeline which is only available at the build stage.

The couple ideas you suggest seem good -- https://github.com/CookPete/react-player and https://github.com/video-react/video-react both look like reasonable video react components -- is there a reason why building a gatsby video component from scratch would be better than adding those props to one of the existing video libraries?

[kripod]

I have already discovered those components, but they don’t offer space pre-allocation (solved by AspectRatioBox), nor can they display a poster after a video finished prefetching.

Also, I think it would be a good idea to add Gatsby plugins similar to ImageSharp, but for videos. I would like to query the metadata of videos (e.g. aspectRatio) with GraphQL.

EDIT: I’ve updated the first comment, fixing a mistake (portrait -> poster) and changing the link of components.

[KyleAMathews]

Makes sense! Is there a lightweight library similar to sharp for doing this on NPM?

Aso it'd make sense I think to have a similar plugin for youtube that knows how to grab an image from there.

[DylanVann]

I'd like something for videos. Something to make HTML5 "GIF"s would be nice.

I used to use this with Jekyll, but it's pretty clunky: https://github.com/sjwilliams/grunt-responsive-videos

[Mike-Dax]

I've hit this requirement with one of my own projects so I'm going to have a go with a solution.

@DylanVann has produced gatsby-transformer-cloudinary but that does cloud based transcoding and our requirements seem to be the inverse of each others! (I need all processing to be done locally).

@KyleAMathews - I can't find any lightweight video transcoding packages on NPM other than ffmpeg bindings. Something like this looks promising: https://github.com/fluent-ffmpeg/node-fluent-ffmpeg

I'm not sure what the recommended approach is when binaries aren't available. We could handle this for the end user by downloading a copy of ffmpeg with something like https://github.com/eugeneware/ffmpeg-static

My requirements are basically gatsby-remark-images but for HTML5 'gifs' so that's the route I'll go first.

[KyleAMathews]

A transformer for video would be very cool!

[Mike-Dax]

@KyleAMathews Would you like this kind of package PR'd against this repository or should I create a repo?

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!

[pablasso]

@Mike-Dax did you implemented this?

[Mike-Dax]

@pablasso I did, let me clean it up and I'll publish it.

[cchawn]

Did this ever end up happening?

[Mike-Dax]

My apologies everyone, I haven't had time to clean it up or actually publish it, you know how life can be. I've uploaded all the code however, it's functional - this holidays I'll have time to do so.

You'll just need to install it manually instead of via npm.

You can install gatsby-remark-videos via npm now.

https://github.com/Mike-Dax/gatsby-plugin-ffmpeg
https://github.com/Mike-Dax/gatsby-remark-videos

[marcysutton]

I see there was work done here last year and the issue was closed without a clear resolution, so I wanted to give it another try now that I'm going through key Gatsby workflows. I'm writing a starter doc for video in #12903, and I feel we should restart this discussion to determine a best practice for working with videos in Gatsby.

There is a package for gatsby-remark-embed-video now with quite a few downloads, which is awesome. I haven't looked into it to see the differences from your solution @Mike-Dax, if anyone beats me to it that would be great to have reported here (hosted on Youtube/Vimeo versus self-hosting?). But I'm also wondering about a use case for pages and templates that don't use Markdown. Can we improve the experience there?

Any thoughts on this? I would also love to provide guidance for users about necessary video file extensions and formats/codecs, as something to keep in mind too :)

[Mike-Dax]

@marcysutton I've published my two packages to npm and updated the readmes with the ffmpeg installation requirements, should make it way easier for new users. I'm not sure of the install procedures of ffmpeg on other OS's, if I get my hands on a windows / nix box I'll have a crack at it and update the readmes.

I haven't looked into it to see the differences from your solution

gatsby-remark-embed-video is for embedding pre-hosted videos, such as those from YouTube in your Gatsby site. You would probably use this for longer form videos, videos that you would want to be discoverable independently of your site, videos with sound, videos you intend to be viewed fullscreen.

gatsby-remark-videos is for locally hosted video, "inline gif" type things, but in modern web formats. I wouldn't use it for anything long form. The examples provided strip out sound.

I'm also wondering about a use case for pages and templates that don't use Markdown

We're moving our site to mdx currently, gatsby-remark-videos is incompatible with that ecosystem so I'll be writing an mdx plugin as well in the near future. We'll also have the use case of a video on our front page which is written as a regular component as opposed to a markdown file, so that path will be taken soon as well.

I would also love to provide guidance for users about necessary video file extensions and formats/codecs

gatsby-remark-videos currently requires the source to have either an avi or mp4 extension. This is fairly arbitrary though, ffmpeg can take more inputs. If anyone needs other formats it'll be trivial to add. The default output is both a vp9 webm and an h264 encoded mp4 which I'm pretty sure provides 100% browser coverage.

[wardpeet]

@marcysutton wdyt? It seems like everything got updated.

[marcysutton]

We still need to add more information to the new video docs, specifically with a recommendation of how to work with HTML5 video (packages, requirements, limitations, etc). If anyone is interested in taking this on, it would be a huge help! https://www.gatsbyjs.org/docs/working-with-video/#hosting-your-own-html5-video-files

[gatsbot]

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! 💪💜

[jhodges10]

@gillkyle Would love to see this implemented soon :)

[Mike-Dax]

@marcysutton @gillkyle I've recently done a transformer plugin built on the previous work as well as a simple Video component based off kripod's suggestions.

https://github.com/Mike-Dax/gatsby-transformer-ffmpeg
https://github.com/Mike-Dax/gatsby-video

In production we're using these plus the previous plugins to provide 'html5 gif' type videos inline with documentation, as well as similar videos on the main site in regular components with static queries.

Intermittently the mp4s for Safari don't seem to render - if anyone has some insight I would appreciate it!

[marcysutton]

We have more docs thanks to #16102, so I'm going to close this issue. For further improvements, please open a new issue (like I should have done!). Thanks everyone :)