How to use url that mixes m3u8 and mp4?

[pffdota04]

If I just use one url extension (either mp4 or m3u8) for all it doesn't matter. (I use ReactHlsPlayer with m3u8 as your example code). Here is the example data:

{
      chap: 1
      link: [
        {
          "quality": "1080",
          "type": "mp4",
          "url": "https://cdn.glitch.me/cbf2cfb4-aa52-4a1f-a73c-461eef3d38e8/1080.mp4"
        },
        {
          "quality": "720",
          "type": "m3u8",
          "url": "https://vie.haiphim.com/20220405/5503_9c6d0e50/index.m3u8"
        }
      ]
}

How to use both mp4 and m3u8 in one Player? Is it possible? I expect something like this:

<Player
        src={[
          {
            quality: "720",
            url: "https://vie.haiphim.com/20220405/5503_9c6d0e50/index.m3u8",
            type: "m3u8" // <<< 
          },
          {
            quality: "1080",
            url: "https://cdn.glitch.me/cbf2cfb4-aa52-4a1f-a73c-461eef3d38e8/1080.mp4"
            type: "mp4" // <<<
          },
        ]}
      >
        {(ref, props) => (
          <ReactHlsPlayer playerRef={ref} {...props} />  
        )} // only use it with m3u8
</Player>

[pffdota04]

I found a solution:

<Player
        src={[...]}
>
       {(ref, props) => {
            const url = props.src;
            if (url.substr(url.length - 4) === "m3u8")
              return <ReactHlsPlayer playerRef={ref} {...props} />;
            else return <video ref={ref} {...props} autoPlay loop />;
      }}
</Player>

Now everything seems to be working in the right. Thank you!