grv

gatsby-remark-videos

Embed html5 style looping videos in your Gatsby site.

Showing:

Popularity

Downloads/wk

28

GitHub Stars

11

Maintenance

Last Commit

4mos ago

Contributors

4

Package

Dependencies

4

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Readme

gatsby-remark-videos

The intent of this plugin is to aid in the embedding of looping 'html5 gifv' like videos from markdown.

Install

npm install --save gatsby-remark-videos gatsby-plugin-ffmpeg

This package is dependent on gatsby-plugin-ffmpeg which has the requirement of ffmpeg installed. Please follow the instructions at https://github.com/Mike-Dax/gatsby-plugin-ffmpeg to install the required dependencies.

Usage

The order of the pipelines will influence the final order in the <video /> tag.

Currently it only detects files with the extensions avi, mp4, mov, mkv. If you have a different container and would like it added, open an issue or create a PR and I'm happy to include it.

Configuration

Make sure this plugin comes before gatsby-remark-images otherwise it might complain about unknown image file formats.

// In your gatsby-config.js
plugins: [
  ...
  {
    resolve: `gatsby-remark-videos`,
    options: {
      pipelines: [
        {
          name: 'vp9',
          transcode: chain =>
            chain
              .videoCodec('libvpx-vp9')
              .noAudio()
              .outputOptions(['-crf 20', '-b:v 0']),
          maxHeight: 480,
          maxWidth: 900,
          fileExtension: 'webm',
        },
        {
          name: 'h264',
          transcode: chain =>
            chain
              .videoCodec('libx264')
              .noAudio()
              .addOption('-profile:v', 'main')
              .addOption('-pix_fmt', 'yuv420p')
              .outputOptions(['-movflags faststart'])
              .videoBitrate('1000k'),
          maxHeight: 480,
          maxWidth: 900,
          fileExtension: 'mp4',
        },
      ],
    }
  },
  ...
]

Also make sure you have a plugin that copies the files you are referencing, for example gatsby-remark-copy-linked-files.

...
{
  resolve: `gatsby-remark-copy-linked-files`,
  options: {},
},
...

Markdown Syntax

Markdown image syntax is used:

Video one:
![](video.avi)

Creates roughly this:

<video autoplay loop>
  <source src="/static/video-hash-optshash.webm" type="video/webm" />
  <source src="/static/video-hash-optshash.mp4" type="video/mp4" />
</video>

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial