React video code for both Dash and HLS?

[prajendra-is]

Describe the bug When I added the video plugin for my amplify app, I picked both HLS and Dash. When I use the code provided by amplify video setup-video-player:

<VideoPlayer 
    autoplay
    controls
    sources={[{
      src: 'https://<abc>.cloudfront.net/{path}/{path.m3u8}',
      type: 'application/x-mpegURL'
    }]}
/>

I'm able to play Dash using:

      sources={[{
        src: 'https://<>.cloudfront.net/<path>/dash/<path>.mpd',
        type: 'application/dash+xml',
      }]}

Or HLS using:

      sources={[{
        src: 'https://<>.cloudfront.net/<path>/hls/<path>.m3u8',
        type: 'application/x-mpegURL',
      }]}

These both work individually, but what code is needed so that it prefers one (say Dash), and fallsback to HLS instead?

Desktop (please complete the following information):

• OS: [macOS 11.6.4]
• Browser [Chrome]
• Version [Version 99.0.4844.83 (Official Build) (arm64)

[erictallman]

Have you tried this?

sources={[
    {
        src: 'https://<>.cloudfront.net/<path>/dash/<path>.mpd',
        type: 'application/dash+xml',
    },
    {
        src: 'https://<>.cloudfront.net/<path>/hls/<path>.m3u8',
        type: 'application/x-mpegURL',
    }
]}