盖茨比视频插件问题

问题描述

我是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,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

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

解决方法

您的<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}}来检索视频。

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