Type of a video HTML element in Typescript

Question

I am trying to detect the presence of audio from a video loaded within a video HTML element compatible with both Mozilla and Chrome. I am using React Player package. The following code is a sample of the video player -

 <ReactPlayer
              url={fileUrl}
              width='400'
              controls
              onDuration={handleVideoDuration}
              onReady={handleVideoReady}
              autoPlay={true}
            />

The following code is the sample of detecting type of the video element -

const player: HTMLVideoElement | null = document.querySelector('video')
const widthHeight = `${player?.videoWidth}×${player?.videoHeight}`
const hasSound =
  player.mozHasAudio ||
  Boolean(player.webkitAudioDecodedByteCount) ||
  Boolean(player.audioTracks?.length)

If I use the type of player as any, it runs smoothly. But that is not what I want. I want to use the correct type defined for player.

mozHasAudio shows error - error message - Property 'mozHasAudio' does not exist on type 'HTMLVideoElement. Similarly webkitAudioDecodedByteCount and audioTracks show same type error message .... does not exist on type HTML VideoElement

I followed this link -

Has anyone worked with these attributes with typescript?

Answer 1

The type errors you are encountering are because the properties mozHasAudio, webkitAudioDecodedByteCount, and audioTracks are not present in the HTMLVideoElement interface by default. These properties are specific to certain browser implementations and are not part of the standard HTML5 video element API.