reactjseslintreact-typescripttypescript-eslint

Media elements such as <audio> and <video> must have a <track> for captions eslint error

When I try to add

<video controls>
  <source src="content.mp4" type="video/mp4" />
  <source src="content.webm" type="video/webm" />
  Your browser does not support the video.
</video>

in my react js project, Eslint throws the following error :-

Media elements such as < audio > and < video > must have a < track > for captions.

Any idea what is this? And how should I fix this in the best way??

Solution

  • This is my solution. Just give it a try

    Based on my understanding of your question, it seems you're seeking information about adding a subtitles track. You can find details on how to do this here: MDN Link

    To include a subtitles track, you need to modify your tag like this:

    <video controls>
  <track default kind="captions" srclang="en" src="SUBTITLE_PATH" />
  <source src="content.mp4" type="video/mp4" />
  <source src="content.webm" type="video/webm" />
  Your browser does not support the video.
</video>

    If you prefer not to include a subtitles file, you can leave the src attribute empty to avoid the eslint warning.