如何在 gatsbyjs 中渲染内容丰富的视频

Question

我来自 contentful 的视频似乎没有正确呈现。它在 DOM 中，但我无法显示它。有什么想法吗？

我在想这可能是一条不正确的路径，这就是为什么它无法访问它但图像可以正常工作并显示的原因。还有一条 eslint 错误消息要求跟踪元素，这会阻止它吗？

这是代码

     {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'}
    ]
  }}}
  />

There is also an eslint error message asking for a track element, could that be blocking it?

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

如何在 gatsbyjs 中渲染内容丰富的视频

how to render a video from contentful in gatsbyjs

video

reactjs

contentful

graphql

gatsby