如何在 gatsbyjs 中从内容渲染视频

Question

我的 contentful 视频似乎无法正确呈现。它在 DOM 中，但我无法显示它。任何想法为什么？

我在想这可能是一条不正确的路径，这就是为什么它无法访问它，但图像可以正常工作并显示得很好。还有一个 eslint 错误信息，要求提供一个 track 元素，会不会阻塞它？

这是代码

     {data.allContentfulPodcast.edges.map(video => 
          <div>
  <ReactPlayer 
   priority
   autoPlay 
   loop
   muted
   className='react-player'
    url={'https:' + video.node.video.file.url}    
    playing={isPlaying}
    height = '100%'
    width = '100%'
     
  />

          </div>
          )}

和 console.log

{
    "allContentfulPodcast": {
        "edges": [
            {
                "node": {
                    "title": "Welcome to our show",
                    "thumbnail": {
                        "file": {
                            "url": "//images.ctfassets.net/hi3b2mc578jm/3wxzzKv4Rblsv1FAUR2SQ/d8f09ade7e9fc57afa2f425bb2da9ed5/business.jpg"
                        }
                    },
                    "content": {
                        "raw": "{\"data\":{},\"content\":[{\"data\":{},\"content\":[{\"data\":{},\"marks\":[],\"value\":\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\\n\\n\",\"nodeType\":\"text\"}],\"nodeType\":\"paragraph\"}],\"nodeType\":\"document\"}"
                    },
                    "video": {
                        "file": {
                            "url": "//assets.ctfassets.net/hi3b2mc578jm/4kK38bwyJRxPYoM3SADQrU/4b11d4079052f651685a407c7fc6ecb4/watch"
                        }
                    },
                    "audioClip": {
                        "file": {
                            "url": "//assets.ctfassets.net/hi3b2mc578jm/4QlnJBILMhACqeadWfr95S/7d70e3ff7d077cf463458edd93099432/mixkit-fast-rocket-whoosh-1714.wav"
                        }
                    }
                }
            }
        ]
    }
}

Answer 1

在我看来，ReactPlayer 似乎无法找到视频，因为它存储在本地，而不是在您告诉播放器 (https://...) 的域中。

尝试部署您的站点以获取有效 URL 或使用本地路径，使用 publicUrl 或 localUrl 而不是 video.file.url。

对于音频标题，您应该使用file 和config props 类似：

  <ReactPlayer 
   priority
   autoPlay 
   loop
   muted
   className='react-player'
    url={'https:' + video.node.video.file.url}    
    playing={isPlaying}
    height = '100%'
    width = '100%'
    config={{ file: {
    tracks: [
      {kind: 'subtitles', src: 'subs/subtitles.en.vtt', srcLang: 'en', default: true},
      {kind: 'subtitles', src: 'subs/subtitles.ja.vtt', srcLang: 'ja'},
      {kind: 'subtitles', src: 'subs/subtitles.de.vtt', srcLang: 'de'}
    ]
  }}}
  />

还有一个 eslint 错误信息要求一个 track 元素， 会不会挡住它？

取决于您的 ESLint 配置。您可以将其配置为阻止或在编译中引发错误（错误）或警告您但允许编译完成（警告）。按照你说的，好像是第二种，不然编译不了项目。