how to render a video from contentful in gatsbyjs - reactjs

Question

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"
}
}
}
}
]
}
}

Answer 1

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.