How to add custom headers when downloading the media file from URL?

[defi jesus]

I want to set the mediaURL prop and somehow add an Authorization header to the request when downloading the media file.

I tried to find the code that actually downloaded the media file but I was unlucky.

Thank you for the awesome project.

[Pietro]

👋 @pouta

The @bbc/react-transcript-editor (as the name suggests) is a react component, and the interface of the component is detailed in the readme with some optional and some compulsory attributes.

  <TranscriptEditor
     transcriptData={ someJsonFile }
     mediaUrl={'https://download.ted.com/talks/KateDarling_2018S-950k.mp4'}
     isEditable={true}
     spellCheck={false}
     sttJsonType={ 'bbckaldi' } 
     handleAnalyticsEvents={ this.handleAnalyticsEvents } 
     fileName={'ted-talk.mp4'}
     title={'Ted Talk'}
     ref={ this.transcriptEditorRef }
   />

The mediaUrl is provided as a string that contains the url to media file - audio or video. Most likely a URL of media on a server. (But could also be a blob).

The component itself is not concerned or opinionated about where and how you get the url from.

You can refer to the code of the demo app to see how we are passing that to the component demo/app.js#L258. However in that example it is an hard coded url for demo purposes.

Reading back on my answer, I am not sure if this answers your question?

The url itself is then ultimately passed to a video element inside the video-player component packages/components/video-player/index.js#L20 which I guess the request to load the content is actually made.

And just to clarify are you trying to user a header authorisation to make sure only authorised users can access certain media files?

These are two quick searches that might help out

• How to Pass Authorization Header in HTTP Request when using HTML5 Player (Audio tag) for security
• Custom headers with HTML5 video requests

[Pietro]

closing this for now, but feel free to add to it if you have follow up questions