how to render a video from contentful in gatsbyjs

user_15479269 0
Viewed 152

My video from contentful doesn't seem to be rendering properly. It's in the DOM but I can't get it to display. Any ideas why ?

I was thinking maybe it's an incorrect path and that's why it can't access it but the image works and displays just fine. There is also an eslint error message asking for a track element, could that be blocking it?

This is the code

     {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>
          )}

and the 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"
                        }
                    }
                }
            }
        ]
    }
}
contentful graphql gatsby reactjs video
1 Answers

To me, it seems that ReactPlayer is not able to find the video because it's stored locally, not in the domain you are telling the player (https://...).

Try deploying your site to get a valid URL or use a local path, using publicUrl or localUrl instead of video.file.url.

For the audio caption, you should use the file along with config props like:

  <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?

Depends on your ESLint configuration. You can configure it to block or to throw an error in the compilation (error) or to warn you but allow the compilation to complete (warning). According to what you say, it seems the second option, otherwise, you wouldn't be able to compile the project.

user_55853710
Related