Gatsby 盖茨比视频插件问题

我是盖茨比的新手，我正在研究盖茨比视频插件，所以我按照他们的说明进行操作

视频剪辑本身名为beach2.mp4，位于src根目录下的images文件夹中。该位置添加在我的gatsby-config.js中，这是该文件的一部分：

{
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images/`,
      },

我安装了软件包本身，并将其添加到我的gatsby-config.js文件中，如下所示：

module.exports = {
  siteMetadata: {
    title: "Gatsby Default Starter",
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-styled-components`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-ffmpeg`,
  ],
}

import React from "react"
import { Container } from "../components"
import * as styles from "../elements"
import Link from "gatsby-link"

export const IndexPage = () => {
  return (
    <Container>
      <styles.HeroWrapper>
        <styles.Video />        
      </styles.HeroWrapper>
    </Container>
  )
}

export default IndexPage

我按照他们的示例查询进行页面查询，在GraphQL中运行此查询时，我开始发现一个问题：

query MyQuery {
  file(relativePath: {eq: "src/images/beach2.mp4"}) {
    childVideoFfmpeg {
      webm: transcode(outputOptions: ["-crf 20", "-b:v 0"], maxWidth: 900, maxHeight: 480, fileExtension: "webm", codec: "libvpx-vp9") {
        width
        src
        presentationMaxWidth
        presentationMaxHeight
        originalName
        height
        fileExtension
        aspectRatio
      }
      mp4: transcode(maxWidth: 900, maxHeight: 480, fileExtension: "mp4", codec: "libx264") {
        width
        src
        presentationMaxWidth
        presentationMaxHeight
        originalName
        height
        fileExtension
        aspectRatio
      }
    }
  }
}

我得到的答复如下：

{
  "data": {
    "file": null
  }
}

在我的components文件夹中，我有一个名为HeroMage.js的文件，其中有查询设置和视频组件，如下所示：

import React from "react"
import { Video } from "gatsby-video"
import { graphql } from "gatsby"
import { HeroWrapper } from "../elements"

export const pageQuery = graphql`
  {
    file(relativePath: { eq: "src/images/beach2.mp4" }) {
      childVideoFfmpeg {
        webm: transcode(
          outputOptions: ["-crf 20", "-b:v 0"]
          maxWidth: 900
          maxHeight: 480
          fileExtension: "webm"
          codec: "libvpx-vp9"
        ) {
          width
          src
          presentationMaxWidth
          presentationMaxHeight
          originalName
          height
          fileExtension
          aspectRatio
        }
        mp4: transcode(
          maxWidth: 900
          maxHeight: 480
          fileExtension: "mp4"
          codec: "libx264"
        ) {
          width
          src
          presentationMaxWidth
          presentationMaxHeight
          originalName
          height
          fileExtension
          aspectRatio
        }
      }
    }
  }
`

export const MainPageVideo = props => {
  const videos = props.data.file.childVideoFfmpeg
  return (
    <HeroWrapper>
      <Video
        // poster={poster_image}
        autoPlay
        muted
        loop
        sources={[videos.webm, videos.mp4]}
      />
    </HeroWrapper>
  )
}

从“React”导入React
从“盖茨比视频”导入{Video}
从“盖茨比”导入{graphql}
从“./元素”导入{HeroWrapper}
export const pageQuery=graphql`
{
文件（relativePath:{eq:“src/images/beach2.mp4”}）{
儿童视频{
转码(
输出选项：[“-crf 20”，“-b:v 0”]
最大宽度：900
最大高度：480
文件扩展名：“webm”
编解码器：“libvpx-vp9”
) {
宽度
src
presentationMaxWidth
显示最大高度
原名
高度
文件扩展名
aspectRatio
}
mp4：转码(
最大宽度：900
最大高度：480
文件扩展名：“mp4”
编解码器：“libx264”
) {
宽度
src
presentationMaxWidth
显示最大高度
原名
高度
文件扩展名
aspectRatio
}
}
}
}
`
导出常量MainPageVideo=props=>{
const videos=props.data.file.childVideoFfmpeg
返回(
)
}

最后，在pages文件夹中的index.js文件中，我完成了以下操作：

module.exports = {
  siteMetadata: {
    title: "Gatsby Default Starter",
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-styled-components`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-ffmpeg`,
  ],
}

import React from "react"
import { Container } from "../components"
import * as styles from "../elements"
import Link from "gatsby-link"

export const IndexPage = () => {
  return (
    <Container>
      <styles.HeroWrapper>
        <styles.Video />        
      </styles.HeroWrapper>
    </Container>
  )
}

export default IndexPage

从“React”导入React
从“./组件”导入{Container}
从“./元素”导入*作为样式
从“盖茨比链接”导入链接
导出常量索引扩展=（）=>{
返回(
)
}
导出默认索引扩展

---

我错过了什么？视频剪辑未显示。

您的

relativePath

必须是相对的：

 file(relativePath: {eq: "src/images/beach2.mp4"})

应成为：

 file(relativePath: {eq: "images/beach2.mp4"})

因为您已经在文件系统中添加了一个

映像

名称。您可以使用

sourceInstanceName

进行查询，如：

query MyQuery {
  file(sourceInstanceName: {eq: "images"}){
    childVideoFfmpeg {
      webm: transcode(outputOptions: ["-crf 20", "-b:v 0"], maxWidth: 900, maxHeight: 480, fileExtension: "webm", codec: "libvpx-vp9") {
        width
        src
        presentationMaxWidth
        presentationMaxHeight
        originalName
        height
        fileExtension
        aspectRatio
      }
      mp4: transcode(maxWidth: 900, maxHeight: 480, fileExtension: "mp4", codec: "libx264") {
        width
        src
        presentationMaxWidth
        presentationMaxHeight
        originalName
        height
        fileExtension
        aspectRatio
      }
    }
  }
}

在您的情况下，上面的过滤查询将包含所有图像和视频（因为它们位于同一文件夹中）。您可以创建另一个文件系统实例，将视频放在那里，并使用相同的方法检索它，使用名为

video

的

sourceInstanceName

---

除了一些优化（解构等）外，代码的其余部分看起来非常完美。

您的

relativePath

必须是相对的：

 file(relativePath: {eq: "src/images/beach2.mp4"})

应成为：

 file(relativePath: {eq: "images/beach2.mp4"})

因为您已经在文件系统中添加了一个

映像

名称。您可以使用

sourceInstanceName

进行查询，如：

query MyQuery {
  file(sourceInstanceName: {eq: "images"}){
    childVideoFfmpeg {
      webm: transcode(outputOptions: ["-crf 20", "-b:v 0"], maxWidth: 900, maxHeight: 480, fileExtension: "webm", codec: "libvpx-vp9") {
        width
        src
        presentationMaxWidth
        presentationMaxHeight
        originalName
        height
        fileExtension
        aspectRatio
      }
      mp4: transcode(maxWidth: 900, maxHeight: 480, fileExtension: "mp4", codec: "libx264") {
        width
        src
        presentationMaxWidth
        presentationMaxHeight
        originalName
        height
        fileExtension
        aspectRatio
      }
    }
  }
}

在您的情况下，上面的过滤查询将包含所有图像和视频（因为它们位于同一文件夹中）。您可以创建另一个文件系统实例，将视频放在那里，并使用相同的方法检索它，使用名为

video

的

sourceInstanceName

---

除了一些优化（解构等）之外，其余的代码看起来非常完美。

我按照您的建议更改了路径，这仍然会导致null，我不太明白如何将文件（sourceInstanceName:{eq:“images”}）附加到与上述相同的查询中。您不必附加它，只需为

源InstanceName

替换

过滤器

。我粘贴了您的代码，编辑器抱怨一个不必要的尾随大括号，但我想应该在文件（sourceInstanceName:{eq:“images”}）之后有一个起始大括号，但我得到了{“data”：{“file”：{“childVideoFfmpeg”：null}}}我按照您的建议更改了路径，这仍然会导致null，并且我不太明白如何将文件（sourceInstanceName:{eq:“images”}）附加到与上面相同的查询中。您不必附加它，只需替换

sourceInstanceName

的

过滤器，编辑器抱怨一个不必要的尾随大括号，但我猜应该在文件（sourceInstanceName:{eq:“images”}之后有一个起始大括号，但我得到的是{“data”：{“file”：{“childVideoFfmpeg”：null}}也在挣扎你解决了吗？也在挣扎你解决了吗？