Question

我是Gatsby的新手，我正在研究Gatsby Video插件，因此我按照他们的docs中的说明进行操作。

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

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

最后，在页面文件夹中的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

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

Answer 1

您的<https://codepen.io/rosy654/pen/PoNZENN>必须是亲戚：

SELECT * FROM (
  SELECT 0 ord1, NOW() as ord2, * 
    FROM myTable WHERE myDate > NOW() - INTERVAL 3 DAY
  UNION ALL
  SELECT 1 ord1, myDate as ord2, * 
    FROM myTable WHERE myDate <= NOW() - INTERVAL 3 DAY
) a 
ORDER BY ord1, ord2 DESC, myPopularityScore

应成为：

var rowNode = myTable.row.add([results.location_id, location_name.value, location_streetname.value , add_loc_hotline_phone ]).draw().node();

const $rowindex_ = $(rowNode).closest("tr");

const loc_city = $rowindex_.find('.location_address').attr('data-loc_city', location_city.value);
const loc_streetname = $rowindex_.find('.location_address').attr('data-loc_streetname', location_streetname.value);

由于您已经向文件系统添加了relativePath名称。您可以使用file(relativePath: {eq: "src/images/beach2.mp4"})进行查询，例如：

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

根据您的情况，上面的过滤查询将包含所有图像和视频（因为它们位于同一文件夹中）。您可以制作另一个文件系统实例，以将视频放置在该文件系统实例中，并使用相同的方法（称为image的{{1}}来检索视频。

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

盖茨比视频插件问题

1 个答案: