mike-dax / gatsby-remark-videos Goto Github PK

Currently the plugin's readme is based on the one on NPM which still has the bug that there was some missing commas. Could there be a patch release so the readme showing up on the gatsby plugin library doesn't have the broken example.

So when developing it would be great to disable ffmpeg compression/optimizations since they take quite long. I already use a function to differ from hard compression and low compression but ffmmpeg tasks still take very long on huge files.

Hello, thank you for creating your plugin, I find it very helpful.

One question: I can't see a way to add controls to the videos created by the plugin, apparently, there are none.

I'd like to make

I am trying to implement this plugin to work with my self hosted videos. Currently getting 'Error: Unable to find plugin "gatbsy-remark-videos". Perhaps you need to install its package?' error during plugin loading. My gatsby-config.js looks like so:

module.exports = {
  plugins: [
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    "gatsby-transformer-remark",
    {
      resolve: `gatsby-remark-copy-linked-files`,
      options: {},
    },
    {
      resolve: "gatsby-plugin-mdx",
      options: {
        extensions: [".mdx", ".md"],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-copy-linked-files`,
            options: {},
          },
          {
            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",
                },
              ],
            },
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1200,
              linkImagesToOriginal: false,
            },
          },
        ],
        plugins: [`gatsby-remark-images`, `gatsby-remark-videos`],
      },
    },
    `gatsby-transformer-ffmpeg`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/videos/`,
      },
    },
  ],
}

Any and all help in getting this working or what I am doing wrong is much appreciated. Thank you

Not sure if it's just me or not, but while the plugin works in Chrome - it does not work in Safari.

For example, https://beta.jeffhq.com/verizon-go90/ this page does not show looping vids in Safari.

jhodges10/jeffhq-v2@777559d

This commit shows my attempt to make sure it wasn't trying to load .webm but even that didn't fix it.

Since we emit html strings, this is incompatible with gatsby-mdx.

Should find a workaround.

Hey @Mike-Dax, are planning to publish this repo as an npm package?

Looking forward to using it =)

I just added your plugin and it seems to work totally fine but looking at the generated code it seems that it has an undefined parent element. I couldn't find the source where it resolves to undefined.

My repo: https://github.com/muuvmuuv/portfolio (development branch)

I have not uploaded the videos yet, so you must remove the videos in content/projects/additive-tv/index.md and content/projects/influxe-gaming/index.md. After that add a video in one project file.

First of all thank you for writing this plugin. I have gotten it to work and it is very useful. But I encountered an issue with it and being relatively new, I'm not sure if there's something simple involving the way Gatsby handles its file system...

• I have my locally stored .mp4 video in the same folder as my markdown file. I reference it in the markdown file as instructed: ! [ ] (filename.mp4).
• When I compile the project, Gatsby finds the file and saves it to public/static as "filename-long-hash.mp4".
• gatsby-remark-videos goes to look for a file in public/static called "filename.mp4", but can't find it because it's been changed to "filename-long-hash.mp4", and so the files aren't transcoded.

My work around to this was to look for the name of the file in videoPath, i.e. I replaced:

return file.absolutePath === videoPath;

with

return videoPath.includes(file.absolutePath.slice(0,-4));

on line 72 of index.js.

But I'm guessing this is not really needed. Where should I be putting my .mp4s so that they don't get renamed like this?

Also I don't know if this is a big deal but the plugin will not work when installed into node-modules, because I believe Gatsby plugins require an index.js file in the plugin root. But if you have the plugin in the optional "plugins" directory in the project root, it seems to work fine. This was a problem for me because "npm install " installs into node_modules by default. I guess you could make a no-op index.js file to get around this. I've noticed many other plugins do this.

Sorry if this is a silly issue. Thanks for all your hard work!

It would appear the problem is related to having index.js nested inside of the lib folder rather than in the package root.

By editing it locally, I was able to get past that error.