1

我是 Gatsby 的新手，我正在研究 Gatsby Video 插件，所以我按照他们文档中的说明进行操作。

视频剪辑本身名为 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`,
  ],
}

我按照他们的示例查询进行页面查询，当我在 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
  }
}

在我的组件文件夹中，我有一个名为 HeroImage.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>
  )
}

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

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

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

4

1 回答 1

0

你relativePath必须是相对的：

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

应该变成：

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

由于您已将image名称添加到文件系统。您可以使用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
      }
    }
  }
}

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

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

于 2020-08-13T13:51:56.190 回答